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

如果我正确理解了您的问题，您尝试创建可折叠树，并且需要在节点中添加图像，因此我修改了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类。正如您在我的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链接可以帮助您。

<强> --- ---更新

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您也可以使用过滤器

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，您只需要.style（＆＃39; fill＆＃39;，＆＃39; url（#image）＆＃39;）或.style（＆＃39; filter＆＃39;，＆＃ 39; url（#image）＆＃39;）和svg中的标记来自上面。其余的javascript只是用于添加示例圈。

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

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

2 个答案: