如何在 D3js 中动态地将图像添加到圆圈中答案

【问题标题】：How to Add Image to Circle Dynamically in D3js如何在 D3js 中动态地将图像添加到圆圈中
【发布时间】：2016-12-25 08:04:17
【问题描述】：

我很难弄清楚如何使用数据集中的链接将图像放置在一个圆圈内。我知道将图像添加到节点需要一个模式 - related SO 关于这个主题的问题在引入节点和数据之前附加了 def、模式和图像元素。

在我的例子中，我找不到在选择器函数中附加标签的方法，因为数据是动态添加到每个节点的。这是项目的代码，每个黑点应该包含不同的昆虫图像（网址在 tsv 文件中）：https://plnkr.co/edit/Ydrxogbfm9JvqrgeQaQ6?p=preview

我尝试使用以下代码更改正文标签中的xlink:href：

<body>
<svg width="1000" height="600">
    <defs id="mdef">
    <pattern id="image" x="0" y="0" height="40" width="40">
      <image x="0" y="0" width="40" height="40" ></image>
    </pattern>
  </defs>
</svg>

</body>

和这个添加节点的代码块内的 JS 的 sn-p。：

.attr('"xlink:href", function(d){return d[1];}) //d is an array and the d[1] is the link

但是，图像没有出现。然后我尝试使用 js 添加模式：

for (i=0;i<insects.length;i++){
  g.selectAll("circle")
      .data(insects[i],function(d) {console.log(d); return d }) //each insect
    .enter().append("circle")
      .attr('cx', function(d,index) {return x(insects[i].length)/insects[i].length*index; })
      .attr("r", 20)
      .attr("cy", function(d,index){return y.bandwidth()*i})
    .append('svg:defs') //adding pattern
    .append('svg:pattern')
      .attr('id','pattern')
        .attr("x",0)
        .attr("y",0)
        .attr("width",40)
        .attr("height",40)
      .append("svg:image")
        .attr("x",0)
        .attr("y",0)
        .attr("width",40)
        .attr("height",40)
        .attr("xlink:href", function(d){console.log(d[1]); return d[1];})
    .style("fill", "url(#pattern)");
  }
})

但我得到了相同的结果。非常感谢任何指针，因为我是 d3 的初学者。节日快乐

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您不能将<defs>、<pattern> 和<image> 附加到一个圈子。那是行不通的。

除此之外，您必须创建 <defs>，附加图案和图像，并根据其唯一 ID 填充圆圈：

var defs = g.append("defs");

defs.selectAll(".patterns")
    .data(insects[i], function(d) {
        return d
    })
    .enter().append("pattern")
    .attr("id", function(d) {
        return "insect" + (d[0].split(" ").join(""))
    })
    .attr("width", 1)
    .attr("height", 1)
    .append("svg:image")
    .attr("xlink:href", function(d) {
        return d[1]
    })
    .attr("width", 40)
    .attr("height", 40);


g.selectAll("circle")
    .data(insects[i], function(d) {
        return d
    })
    .enter().append("circle")
    .attr('cx', function(d, index) {
        return x(insects[i].length) / insects[i].length * index;
    })
    .attr("r", 20)
    .attr("cy", function(d, index) {
        return y.bandwidth() * i
    })
    .style("fill", function(d) {
        return "url(#insect" + (d[0].split(" ").join("")) + ")"
    });
}

这是您更新的插件：http://plnkr.co/edit/WLC2ihpzsjDUgcuu910O?p=preview

PS：您的代码正在运行，但我不得不说您的 for 循环在 D3 dataviz 中是不必要的（甚至是尴尬的）。这不是访问数据的D3 方式。因此，我建议您在该块中完全重构您的代码。

【讨论】：

我尝试通过将 .forEach 循环添加到 .data 来摆脱外部 for 循环，但不幸的是我无法让它工作。