如何在 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

如果要使用填充，则需要添加图案。

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 后，您可以多次重复使用两者。

Answer 2

如果我对你的问题理解正确，你试图创建一个可折叠的树并且你需要在节点中添加图像，所以我修改 this 示例并创建一些代码。

第一步自定义您的 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"
        }]
       }]
     }

修改你的代码。

---更新---

在 JavaScript 中显示可点击对象的常规方法正在使用 CSS class。正如您在我的 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 here。

This link 可以帮到你。

---更新---

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

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

How to place an image in D3 node?

javascript

image

hyperlink

nodes

d3.js