128

だからここに私が持っているものがあります:

<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 ...
}
...

alert(); を使用しても、非常に長いツールチップ テキストに改行がありません。テキストには実際に 2 行あることがわかります。(「\」が含まれていますが、どうすればそれを削除できますか?)
CDATA をどこでも動作させることができません。

4

6 に答える 6

173

これは、SVG 1.1 がサポートしているものではありません。SVG 1.2 にはこのtextArea要素があり、自動でワード ラップが行われますが、すべてのブラウザーに実装されているわけではありません。SVG 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>

もちろん、JavaScript から実行したいので、各要素を手動で作成して DOM に挿入する必要があります。

于 2013-05-22T21:34:53.953 に答える
30

あなたはすでにそれを解決できたと思いますが、誰かが同様の解決策を探しているなら、これは私にとってはうまくいきました:

 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 行があります。

于 2013-10-25T11:57:45.423 に答える
19

tspan ソリューションでは、改行を配置する場所が事前にわからないとしましょう。ここで見つけたこの素晴らしい関数を使用できます: http://bl.ocks.org/mbostock/7555321

これにより、ピクセル単位で指定された幅の長いテキスト svg の改行が自動的に行われます。

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")) || 0,
        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);
      }
    }
  });
}
于 2015-02-17T01:48:24.957 に答える
10

これはあなたが望むことだと思います：

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各フラグメントを tspan に入れます。次に、テキストの最長の長さと行数に基づいて、必要なボックスのサイズを計算します。また、ツールチップ テキスト要素を変更して、3 つの tspan を含める必要があります。

<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>

これは、回線が 3 つを超えないことを前提としています。3 行以上が必要な場合は、さらに tspan を追加して for ループの長さを増やすことができます。

于 2013-05-23T11:28:00.627 に答える