Question

我确实谷歌找不到我要找的东西。

我想将图像添加到d3节点，但不是通过替换整个节点。但是与d3圈节点一起，我想要附加图像。比如在节点上添加标签。

我希望这能标记一个节点。例如，在拓扑中，想要显示路径的源和目标。

编辑： 如果还有更好的方法，请建议。我尝试将图像添加到节点。我可以看到图像被添加到萤火虫中，但它不可见。

在小提琴中试过。 http://jsfiddle.net/pkolanda/2ryu34qv/

  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

    nodeEnter
      .append("img")
      .attr("src","https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w300");

在小提琴中，我试图添加到所有节点。根据用户事件，我将选择要标记的节点。

Answer 1

jsfiddle页面现在是404，请尝试下面的代码：

  var pattern_def = svg.append("defs");  //append defs in svg
  nodeEnter = svg.selectAll(".some-node")
                .data(data)
                .enter().append("circle")
                .attr("class","some-node")
                .attr({
                    "cx": 50,
                    "cy": 50,
                    "r": 10
                })
                .each(function(d,i){
                    // append image pattern for each node
                    pattern_def.append("pattern")
                        .attr("id", "node-img")
                        .attr("patternUnits", "objectBoundingBox")
                        .attr({
                            "width": "100%",
                            "height": "100%"
                        })
                        .attr({
                            "viewBox": "0 0 1 1" 
                        })
                        .append("image")
                        .attr("xlink:href", d.imageUrl) //use xlink:href with image url 
                        .attr({
                            "x":0,
                            "y":0,
                            "width": "1",
                            "height": "1",
                            "preserveAspectRatio": "none"
                        })

                    d3.select(this).attr("fill", "url(#node-img)") 
                   // fill node with the image pattern
                   // if the image is fixed for every node, you can add the fill attribute in node settings
                })

Answer 2

这与this

类似

Django

将图像与圆

2 个答案: