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

您无法将html元素附加到svg。唯一的方法 - 使用foreignObject元素。

foreignObject SVG元素允许包含外部XML 命名空间，其图形内容由不同的用户绘制剂。包含的外国图形内容受SVG约束转换和合成。

看一下非常简单的例子：

var texts = ['foo', 'bar'];

var container = d3.select('g');

container
	.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>

单击数据标签d3.js时添加输入文本框

1 个答案: