将图像添加到 d3 和弦图答案

【问题标题】：Add images to d3 chord diagram将图像添加到 d3 和弦图
【发布时间】：2014-08-23 04:53:22
【问题描述】：

我希望图像作为端点。我试过添加但没有运气。任何想法/工作示例？

http://bost.ocks.org/mike/uberdata/

【问题讨论】：

【解决方案1】：

该示例中的每个邻域都有一个 <g> 元素，其类为 group。

// Add a group per neighborhood.
var group = svg.selectAll(".group")
    .data(layout.groups)
  .enter().append("g")
    .attr("class", "group")
    .on("mouseover", mouseover);

这是附加文本标签和端点路径的元素。

// Add the group arc.
var groupPath = group.append("path")
    .attr("id", function(d, i) { return "group" + i; })
    .attr("d", arc)
    .style("fill", function(d, i) { return cities[i].color; });

// Add a text label.
var groupText = group.append("text")
    .attr("x", 6)
    .attr("dy", 15);

您也可以使用 svg <image> 元素将每个图像附加到该组。例如，如果您的数据集包含图片的网址，您可以执行以下操作：

var groupImage = group.append("image")
  .attr("xlink:href", function(d) {return d.image_url;})

【讨论】：

您没有设置图像的大小或提供它们应该去的位置。我提出了解决问题的一般方法，而不是提供复制粘贴解决方案。除了 xlink:href 之外，您还需要包括宽度、高度和转换为大小和位置图像的属性。