জাভাস্ক্রিপ্টের মধ্যে কোনও এসভিজি পাঠ্যকে লাইনব্রেক করবেন কীভাবে?

Question

আমার কাছে যা আছে তা এখানে:

<path class="..." onmousemove="show_tooltip(event,'very long text 
    \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/>

<rect class="tooltip_bg" id="tooltip_bg" ... />
<text class="tooltip" id="tooltip" ...>Tooltip</text>

<script>
<![CDATA[
function show_tooltip(e,text) {
    var tt = document.getElementById('tooltip');
    var bg = document.getElementById('tooltip_bg');

    // set position ...

    tt.textContent=text;

    bg.setAttribute('width',tt.getBBox().width+10);
    bg.setAttribute('height',tt.getBBox().height+6);

    // set visibility ...
}
...

এখন আমার খুব দীর্ঘ টুলটিপ পাঠ্যের একটি লাইন ব্রেক নেই, যদিও আমি সতর্কতা ব্যবহার করি (); এটি আমাকে দেখায় যে পাঠ্যটির দুটি লাইন রয়েছে। (এতে একটি "\" রয়েছে, তবে কীভাবে আমি সেটিকে সরিয়ে দেব?)
আমি কোথাও কাজ করার জন্য সিডিএটিএ পেতে পারি না।

Comments

এই svgjs.com / পাঠ্য প্রবাহ আপনার সরঞ্জামদণ্ডের সাহায্য করতে পারে কোন সুযোগ ?

— অ্যালভিন কে।

@AlvinK। লিঙ্কটি নষ্ট হয়ে গেছে। আমি নতুন জায়গাটি সন্ধান করার চেষ্টা করেছি, কিন্তু ব্যর্থ হয়েছি।

— guettli

Answer 1

এটি এসভিজি ১.১ সমর্থন করে এমন কিছু নয়। textAreaস্বয়ংক্রিয় শব্দ মোড়ক সহ এসভিজি ১.২ এর উপাদান রয়েছে তবে এটি সমস্ত ব্রাউজারে প্রয়োগ করা হয়নি। এসভিজি 2 বাস্তবায়ন করার পরিকল্পনা করে নাtextArea , তবে এতে স্বয়ংক্রিয়ভাবে মোড়ানো পাঠ্য রয়েছে ।

যাইহোক, আপনার লাইনব্রেকগুলি কোথায় হওয়া উচিত তা আপনি ইতিমধ্যে জেনে গেছেন, আপনি নিজের পাঠ্যটিকে একাধিক <tspan>গুলি বিভক্ত করতে পারেন , প্রতিটি পাঠ্যের আসল লাইন সহ x="0"এবং dy="1.4em"অনুকরণ করতে। উদাহরণ স্বরূপ:

<g transform="translate(123 456)"><!-- replace with your target upper left corner coordinates -->
  <text x="0" y="0">
    <tspan x="0" dy="1.2em">very long text</tspan>
    <tspan x="0" dy="1.2em">I would like to linebreak</tspan>
  </text>
</g>

অবশ্যই, আপনি যেহেতু জাভাস্ক্রিপ্ট থেকে এটি করতে চান, আপনাকে নিজেই ডিওমে প্রতিটি উপাদান তৈরি করতে এবং sertোকাতে হবে।

Comments

এবং কোথায় রাখব তা আমি কীভাবে চিনব <tspan>s? প্রতিস্থাপন করবেন? স্প্লিট?

— একাকী

এটি চেষ্টা করে দেখে var tspan = document.createElement('tspan') tspan.setAttribute('x','0'); tspan.setAttribute('dy','1.2em'); tspan.textContent = text; tt.appendChild(tspan); কোনও পাঠ্য দেখায় না।

— একাকী

আপনার উপর সম্প্রসারিত কেন পরোয়া করবে এক্স = '0' ডিওয়াই = '1.2em' প্রয়োজন? এটি যেমন কাজ করে ঠিক তেমনি করেই। যাইহোক, আমি আশা করছিলাম এটি এই বৈশিষ্ট্যগুলি ছাড়াই কাজ করবে। পরিবর্তে, কিছুই প্রদর্শিত হয় না ... এছাড়াও, লাইনব্রেক কেন হয় তা পুরোপুরি পরিষ্কার করছি না । এটি ঠিক নয় যে আমরা কোনও ধারকটির প্রস্থ সেট করে ফিক্স করেছি, যাতে এটি লাইন ব্রেকিং চাপিয়ে দিতে পারে, তাই না?

— কনরাড ভিল্টারস্টন

x=0এটি একটি পরম স্থানাঙ্ক: বর্তমান সমন্বয় সিস্টেমের উত্সে পাঠ্য খণ্ডকে সরান । transformউপর অ্যাট্রিবিউট gউপাদান সংজ্ঞায়িত একটি নতুন বর্তমান তুল্য সিস্টেম, এবং অভিমানী যে লেখা বাম-প্রান্তিক, tspan বাঁদিকে সরিয়ে নেওয়া হয়েছে। এটি ক্যারিজ রিটার্নের নির্দেশের মতো কাজ করে। dy=1.2emএকটি হল আপেক্ষিক এই পরিমাণ, বর্তমান টেক্সট টুকরা আপেক্ষিক করার মাধ্যমে পাঠ্য টুকরা সরান: তুল্য। এটি লাইন-ফিড নির্দেশের মতো কাজ করে। সংযুক্ত, আপনি একটি সিআর / এলএফ পাবেন।

— সের্গিউ দুমিত্রিউ

এটি এখনও চেষ্টা করে দেখেনি: আপনিও দল ছাড়া এই কাজটি করতে পারেন? <টেক্সট x = "100" y = "100"> <tspan x = "100" y = "100"> খুব দীর্ঘ পাঠ লাইন ব্রেক </ span> </text> ??

— রিচার্ড 20

Answer 2

আমি বিশ্বাস করি আপনি অ্যালরেডি এটির সমাধান করতে পেরেছেন, কিন্তু যদি কেউ একইরকম সমাধান খুঁজছেন তবে এটি আমার পক্ষে কাজ করেছে:

 g.append('svg:text')
  .attr('x', 0)
  .attr('y', 30)
  .attr('class', 'id')
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 5)
  .text(function(d) { return d.name; })
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 20)
  .text(function(d) { return d.sname; })
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 20)
  .text(function(d) { return d.idcode; })

লাইনব্রেকের সাথে 3 টি লাইন পৃথক রয়েছে।

Comments

এফডাব্লুআইডাব্লু: মনে হচ্ছে ওপি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করছে; এই উত্তরটি D3 উপকারের বলে মনে হচ্ছে ।

— বেন মোশার

আমি ডি 3 ব্যবহার করছি, এবং আপনার পদ্ধতির আমার পক্ষে কাজ করেছে। এটি পোস্ট করার জন্য ধন্যবাদ। আমি দেখতে পেয়েছি যে নতুনগুলি যুক্ত করার আগে আমাকে পুরানো টিস্পানগুলি প্রথমে মুছে ফেলা দরকার ছিল: ফোকাস.সিলিটআল ("টিস্পান") সরান ();

— ড্যারেন পার্কার

এই পদ্ধতির সাথে সাবধান থাকুন যে এটি <tspan> ট্যাগগুলিকে বাসা বেঁধে রাখে। এটি আপনি কী করতে চান তার উপর নির্ভর করে সিএসএসের সাথে কিছু ছোট ছোট মাথা ব্যথার কারণ হতে পারে।

— সিনিয়র

@Seneyr দ্বারা বর্ণিত বাসা এড়ানো এড়াতে এমন একটি পদ্ধতির জন্য এখানে দেখুন

— বিএসজম

Answer 3

Tspan সমাধানের সাথে, আসুন আমরা আপনাকে আগেই জানতাম না যে আপনার লাইন ব্রেকগুলি কোথায় রাখবেন: আপনি এই দুর্দান্ত ফাংশনটি ব্যবহার করতে পারেন, যা আমি এখানে পেয়েছি: http://bl.ocks.org/mbostock/7555321

এটি স্বয়ংক্রিয়ভাবে পিক্সেলের প্রদত্ত প্রস্থের জন্য লম্বা পাঠ্য এসভিজির জন্য লাইন বিরতি দেয়।

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

Answer 4

আমি মনে করি এটি আপনি যা চান তা করে:

function ShowTooltip(evt, mouseovertext){
    // Make tooltip text        
    var tooltip_text = tt.childNodes.item(1);
    var words = mouseovertext.split("\\\n");
    var max_length = 0;

    for (var i=0; i<3; i++){
        tooltip_text.childNodes.item(i).firstChild.data = i<words.length ?  words[i] : " ";
        length = tooltip_text.childNodes.item(i).getComputedTextLength();
        if (length > max_length) {max_length = length;}
    }

    var x = evt.clientX + 14 + max_length/2;
    var y = evt.clientY + 29;
    tt.setAttributeNS(null,"transform", "translate(" + x + " " + y + ")")

    // Make tooltip background
    bg.setAttributeNS(null,"width", max_length+15);
    bg.setAttributeNS(null,"height", words.length*15+6);
    bg.setAttributeNS(null,"x",evt.clientX+8);
    bg.setAttributeNS(null,"y",evt.clientY+14);

    // Show everything
    tt.setAttributeNS(null,"visibility","visible");
    bg.setAttributeNS(null,"visibility","visible");
}

এটি পাঠ্যকে বিভক্ত করে \\\nএবং প্রত্যেকটির জন্য প্রতিটি খণ্ডকে এক চামচায় রাখে। তারপরে এটি পাঠ্যের দীর্ঘতম দৈর্ঘ্য এবং রেখার সংখ্যার ভিত্তিতে প্রয়োজনীয় বাক্সের আকার গণনা করে। তিনটি চামচ যুক্ত করতে আপনাকে টুলটিপ পাঠ্যের উপাদানটিও পরিবর্তন করতে হবে:

<g id="tooltip" visibility="hidden">
    <text><tspan>x</tspan><tspan x="0" dy="15">x</tspan><tspan x="0" dy="15">x</tspan></text>
</g>

এটি ধরে নিয়েছে যে আপনার কাছে কখনও তিনটি লাইনের বেশি থাকবে না। আপনি যদি তিনটির বেশি লাইন চান তবে আপনি আরও টি স্প্যান যুক্ত করতে পারেন এবং লুপটির দৈর্ঘ্য বাড়িয়ে দিতে পারেন।

Comments

এর "\\\n"চেয়ে কেন হয় "\n"?

— রালিয়েন

Answer 5

আমি একটু @steco দ্বারা সমাধান অভিযোজিত হয়েছে, থেকে নির্ভরতা সুইচিং d3করতে jqueryএবং যোগ heightপ্যারামিটার হিসাবে পাঠ্য উপাদান

function wrap(text, width, height) {
  text.each(function(idx,elem) {
    var text = $(elem);
    text.attr("dy",height);
        var words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat( text.attr("dy") ),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (elem.getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

Answer 6

জাভাস্ক্রিপ্টের পরিবর্তে এইচটিএমএল ব্যবহার করুন

<html>
  <head><style> * { margin: 0; padding: 0; } </style></head>
  <body>
    <h1>svg foreignObject to embed html</h1>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 300 300"
      x="0" y="0" height="300" width="300"
    >

      <circle
        r="142" cx="150" cy="150"
        fill="none" stroke="#000000" stroke-width="2"
      />

      <foreignObject
        x="50" y="50" width="200" height="200"
      >
        <div
          xmlns="http://www.w3.org/1999/xhtml"
          style="
            width: 196px; height: 196px;
            border: solid 2px #000000;
            font-size: 32px;
            overflow: auto; /* scroll */
          "
        >
          <p>this is html in svg 1</p>
          <p>this is html in svg 2</p>
          <p>this is html in svg 3</p>
          <p>this is html in svg 4</p>
        </div>
      </foreignObject>

    </svg>

</body></html>

Comments

আমার মনে হয় আপনার অর্থ "জাভাস্ক্রিপ্টের পরিবর্তে এসভিজি ব্যবহার করুন"

— ভ্যালেরিও বোজ

এটি "এসভিজিতে এইচটিএমএল", এটি আমার পক্ষে সেরা সমাধান!

— কেভিন বার্থোমিয়ার