データラベルをクリックすると入力テキストボックスが追加されるd3.js

Question

d3.js v3を使用して散布図に注釈を実装しようとしています。私は私のグラフ上のテキストラベルをクリックすると、テキストボックスを挿入したいと思います。私はこのコードを書いた：

circleGroup.selectAll("text") 
      .data(data) 
      .enter() 
      .append("text") 
      .text(function (d) { 
      if (d.label) { 
       return d.label; 
      } 
      return ""; 
      }) 
      .attr("x", function (d) { 
       return x(d.time) + 6; 
      }) 
      .attr("y", function (d) { 
       return y(d.plotY) + 4; 
      }) 
      .attr("font-size", "10px") 
      .attr("fill", "#2d3d45") 
      .on("click", function(d) { 
       d3.select(this).append("input").attr("type", "text").attr("name", "textInput").attr("value", "Text goes here"); 

      }); 

テキスト要素の選択が正しく機能しています。テキストラベルをクリックするとそのテキストボックスが表示されません。どこが間違っていますか？私のアプローチは正しい方向ではないのですか？

Answer 1

svgにhtml要素を追加することはできません。これを行う唯一の方法は、foreignObject要素を使用することです。

のforeignObject SVG要素は、異なるユーザ エージェントによって描かれたグラフィカルコンテンツを持つ外部XML 名前空間の包含を可能にします。含まれている外国のグラフィックコンテンツは、SVG 変換と合成の影響を受けます。非常に簡単な例で

ルック：のforeignObjectの概念を説明するための

var texts = ['foo', 'bar']; 
 

 
var container = d3.select('g'); 
 

 
container 
 
\t .selectAll('text') 
 
    .data(texts) 
 
    .enter() 
 
    .append('text') 
 
    .text(function(d) { return d; }) 
 
    .attr('y', function(d,i) { return 50 * i }) 
 
    .on('click', function(d,i) { 
 
    container 
 
     .append("foreignObject") 
 
     .attr("x", 0) 
 
     .attr("y", function() { return 50 * i }) 
 
     .attr("width", 140) 
 
     .attr("height", 20) 
 
     .html(function(d) { 
 
     return '<input type="text" value="Text goes here" />' 
 
     }) 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div style="font-size: 12px;">Click on the texts below:</div> 
 
<svg width="300" heigth="400"> 
 
    <g transform="translate(20, 20)"> 
 
    </g> 
 
</svg>