每个圆/节点的 D3JS 不同图像答案

【问题标题】：D3JS different image for each circle/node每个圆/节点的 D3JS 不同图像
【发布时间】：2015-09-24 14:32:47
【问题描述】：

所以，我想在 d3js 的每个圆圈中应用不同的图像。

一个圆圈 = 一个图像与其他图像不同...

在我的 JSON 数据中，我添加了这样的图像路径：

{"name":"Myriel","group":1,"icon": "images/01.png"},
{"name":"Napoleon","group":1,"icon": "images/10.png"}

我发现在 d3js 中以圆圈显示图像的唯一解决方案是：

我声明了 refs 和 svg 对象。

for(var i=0;i<graph.nodes.length;i++){

   var defs = svg.append('svg:defs');
            defs.append('svg:pattern')
                .data(graph.nodes)
                .attr('id', "image"+i)
                .attr('width', '1')
                .attr('height', '1')
                .append('svg:image')
                .attr('xlink:href', function(d) { return(graph.nodes[i].icon); })
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', 120)
                .attr('height', 120);
}

我像这样构建了我的节点/圈子：

  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 30)
      .style("fill","url(#image1)")
      .on("mouseover",function(){

      var sel = d3.select(this)
      sel.moveToFront();
    })
      .on("mouseout",function(){
        var sel = d3.select(this);
          sel.moveToBack();
        });

如果你想要更多解释，请告诉我。对不起我的英语......

提前感谢您的帮助！

【问题讨论】：

似乎是什么问题？你能提供一个jsfiddle吗？
我无法构建 jsfiddle，它不起作用，因为数据...这里的问题是，我在所有圈子中都有相同的图像，而我想要在每个圈子中使用不同的图像..
用你的数据结构做一个最小可重复的例子。如果它不起作用，如果我们至少可以看到整个代码，我们也许可以为您提供帮助。
我尝试了一些东西，但现在，我只有一个圈..jsfiddle.net/hn66hpev
见stackoverflow.com/questions/18178008/…

标签： javascript d3.js svg

【解决方案1】：

这就是我在项目中的做法 (http://arda-maps.org/familytree/)。我使用 png 作为图像很难，但如果你只是用你的 svg 路径中的 ID 替换它，它非常相似。

            node
                .append("svg:image")
                .attr("class", "circle")
                .attr("xlink:href", function (d) {
                    return "/pics/arda/creature/" + d.uniquename + "_familytree.png";
                })
                .attr("x", function (d) {
                    return familytree.posXY(d);
                })
                .attr("y", function (d) {
                    return familytree.posXY(d);
                })
                .attr("width", function (d) {
                    return familytree.sizeXY(d);
                })
                .attr("height", function (d) {
                    return familytree.sizeXY(d);
                })
                .on("error", function () {
                    d3.select(this).style("visibility", "hidden");
                });

所以你应该测试一下这是否适合你。

.attr("xlink:href", function (d) {
                    return "url(#image1)";
                })

【讨论】：