web-dev-qa-db-ja.com

D3 SVG四角形へのテキストの追加

D3の四角形にhtmlを追加して、複数行のツールチップを表示したいと考えています。下部は、問題の一部である可能性のある長方形を追加する方法です。一番上は、私の世界で動作するはずのコードです。

 newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>");

SVGにテキストフィールドを挿入しますが、表示されません。
HTML：

<rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red">
    <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea>
</rect>

以下を実行するマウスオーバー機能があります：

    newRect = svg.append("rect")
    .attr("x", xCor)
    .attr("y", yCor)
    .attr("width", 130)
    .attr("height", 160)
    .attr("fill", "red")
    .attr("id", "rectLabel");

私はこれをやるべきだと思うが、うまくいかない。追加しようとしているg.nodeを削除するだけです。

    newRect = $(this).enter().append("rect")
    .attr("x", xCor)
    .attr("y", yCor)
    .attr("width", 130)
    .attr("height", 160)
    .attr("fill", "red")
    .attr("id", "rectLabel");

質問：テキストが表示されないのはなぜですか？ .html、.textAreaを試しました。複数行のラベルが必要なので、.textが正しく機能しないと思いますか？また、長方形をどのように追加する必要がありますか？

javascriptsvgd3.js
62
gbam

rectにはtext要素を含めることはできません。代わりに、テキストと長方形の位置でg要素を変換し、長方形とテキストの両方をそれに追加します。

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

http://bl.ocks.org/mbostock/7341714

複数行のラベルも少し注意が必要です。この wrap function を確認してください。

113
Adam Pearce

SVG text 要素を試しましたか？

.append("text").text(function(d, i) { return d[whichevernode];})

rect 要素はその中にtext要素を許可しません。説明要素（<desc>, <metadata>, <title>）とアニメーション要素（<animate>, <animatecolor>, <animatemotion>, <animatetransform>, <mpath>, <set>）のみが許可されます

テキスト要素を兄弟として追加し、配置に取り組みます。

UPDATE

gグループ化を使用して、このようなものはどうですか？ fiddle

ロジックを追加できるCSSクラスに確実に移動し、グループ（this.parentNode）から削除できます。

8
cbayram