Question

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

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

我尝试使用以下代码更改body标签中的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片段添加节点。：

.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的初学者。节日快乐

Answer 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("")) + ")"
    });
}

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

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

如何在D3js中动态添加图像到圆圈

1 个答案: