Question

所以，我想在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();
        });

如果你想要更多的解释，请说明一下。对不起我的英文......

提前感谢您的帮助！

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

D3JS每个圈子/节点的不同图像

1 个答案: