1. ホーム
  2. javascript

[解決済み] D3は、SVGの矩形にテキストを追加する

2022-02-18 14:16:43

質問

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ではうまくいかないと思うのですが? また、矩形はどのように追加すればいいのでしょうか?

どのように解決するのですか?

A {コード を含むことはできません。 rect 要素を使用します。代わりに text 要素にテキストと矩形の位置を指定し、矩形とテキストの両方を追加します。

g

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

複数行のラベルはまた、少し厄介です。 ラップ機能 .