如何在D3节点中放置图像？

Question

到目前为止，我已经创建了这些D3节点，用于创建可折叠的分层树。 到目前为止，这些节点的颜色为＃AA1C1C（深红色），表明如果单击它们，它们将扩展为更多节点。 我想要做的是在节点中使用图像中的位置，这将是所有用户知道它可点击的加号。 我该怎么做呢？ 我试图使用这个符号： http ： //uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg

D3

nodeUpdate.select("circle")
  .attr("r", 6.2)
  .style("fill", function(d) { return d._children ? "blue" : "#fff"; 

}）;

SVG：

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

我在正确的路线上吗？

Answer 1

如果我正确理解了您的问题，您尝试创建可折叠树，并且需要在节点中添加图像，因此我修改此示例并创建一些代码。

1. 第一步自定义您的json或数据如下：

    var data = { "fname": "Rachel", "lname": "Rogers", "title": "CEO", "photo": "http://lorempixel.com/60/60/cats/1", "children": [{ "fname": "Bob", "lname": "Smith", "title": "President", "photo": "http://lorempixel.com/60/60/cats/2", "children": [{ "fname": "Mary", "lname": "Jane", "title": "Vice President", "photo": "http://lorempixel.com/60/60/cats/3", "children": [{ "fname": "Bill", "lname": "August", "title": "Dock Worker", "photo": "http://lorempixel.com/60/60/cats/4" }, { "fname": "Reginald", "lname": "Yoyo", "title": "Line Assembly", "photo": "http://lorempixel.com/60/60/cats/5" }] }, { "fname": "Nathan", "lname": "Ringwald", "title": "Comptroller", "photo": "http://lorempixel.com/60/60/cats/6" }] }] } 

   2. 修改你的代码。

---更新---

在JavaScript中显示可点击对象的常规方法是使用CSS类。 正如您在我的jsfiddle代码中看到的，我使用.node { cursor: pointer;}来显示此节点是可单击的。 您可以像这样更改代码：

   nodeUpdate.select("circle")
               .attr("r", 6.2)
               .style("filter", function(d) { 
                   return d._children ? "url(#image)" : "#fff"; 
                }).on("mouseover",function(d){
                           d3.select(this).style("cursor","pointer");
                });

在这里完成jsfiddle。

这个链接可以帮到你。

---更新---

我修改我的代码以从json文件中读取数据。 这是更新的代码。

Answer 2

如果要使用填充，则需要添加模式。

 var box = d3.select('svg') .append('svg:circle') .attr('cx', 60) .attr('cy', 60) .attr('r', 10) .style('fill', 'url(#image)') 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="700" height="660"> <defs id="mdef"> <pattern id="image" x="0" y="0" height="40" width="40"> <image x="0" y="0" width="20" height="20" xlink:href="http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg"></image> </pattern> </defs> </svg> 

您也可以使用过滤器

 d3.select('svg') .append('svg:circle') .attr('cx', 60) .attr('cy', 60) .attr('r', 20) .style('filter', 'url(#image)') 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="700" height="660"> <filter id="image" x="0%" y="0%" width="100%" height="100%"> <feImage xlink:href="http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg" /> </filter> </svg> 

请注意，您只需要.style（'fill'，'url（#image）'）或.style（'filter'，'url（#image）'）以及上面svg中的标记。 其余的javascript只是用于添加示例圈。

将它添加到svg后，可以多次重复使用。