使用 d3.js 将图像插入树状图的叶子中

Question

我正在使用 Cluster Dendogram。我想根据我的聚类结果将图像插入到树状图的叶子中。我该怎么做？

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
 <svg id="mySvg" width="80" height="80">
    <defs id="mdef">
      <pattern id="image" x="-100" y="-100" height="200" width="200" patternUnits="userSpaceOnUse" >
        <image x="50" y="5" width="10" height="10" xlink:href="http://www.e-pint.com/epint.jpg"></image>
      </pattern>

    </defs>
  </svg>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 2200;

var cluster = d3.layout.cluster()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40,0)");



d3.json("https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/example/data/flare.json", function(error, root) {
  var nodes = cluster.nodes(root),
      links = cluster.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  //var circle = svg.append("circle")
   //   .style("fill", "red")
   //   .style("fill", "url(#image)"); 

  node.append("circle")
      .attr("r", 4.5);
      //.style("fill", "black");e

  node.append("image")
      .attr("xlink:href", "http://www.e-pint.com/epint.jpg")


  node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; });
});

d3.select(self.frameElement).style("height", height + "px");
console.log(d3);
</script>

在此代码中，我添加了样式部分和 node.append("image") .attr("xlink:href", "http://www.e-pint.com/epint.jpg")。

问题是我看不到充满图像的圆圈。有什么问题吗？

Answer 1

勾选这个JSFiddle

这是向树叶添加图像的代码：

var leafnodes = svg.selectAll('g.leaf.node')
   .append("image")
   .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
   .attr("width", 10)
   .attr("height", 10);

在此之前，叶节点被标记为 leaf class，如下所示：

.attr("class", function(n) {
      return n.children ? "inner node" : "leaf node";
})

更新：

要向节点添加不同的图像，您可以这样做：

var imgs = ['http://***.jpg',
            'http://***.jpg',
            'http://***.jpg'];

var leafnodes = svg.selectAll('g.leaf.node')
    .append("image")
    .attr("xlink:href", function (d) { 
        // get random image from array
        return imgs[Math.floor(Math.random() * imgs.length)]; 
    })
    .attr("width", 10)
    .attr("height", 10);

完整示例请查看上面的 JSFiddle。

Answer 2

您可以使用 svg clipPath 用图像填充圆圈。

示例代码：

var imgRadius = 10 - 1.5; //Where 10 is the radius of node and 1.5 is the stroke width

svg.append("defs")
    .append("clipPath")
    .attr('id', "circleCip")
    .append("circle")
    .attr("r", imgRadius);

node.append("svg:image")
    .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
    .attr("clip-path", "url(#circleCip)")
    .attr("x", function(d) {
        return -imgRadius;
    })
    .attr("y", function(d) {
        return -imgRadius;
    })
    .attr("width", function(d) {
        return imgRadius * 2;
    })
    .attr("height", function(d) {
        return imgRadius * 2;
    });

演示

var width = 960,
    height = 2200;

var cluster = d3.layout.cluster()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        return [d.y, d.x];
    });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("g")
    .attr("transform", "translate(40,0)");

var imgRadius = 10 - 1.5; //10 is the radius of node and 1.5 is the stroke width

svg.append("defs")
    .append("clipPath")
    .attr('id', "circleCip")
    .append("circle")
    .attr("r", imgRadius);



var flare = {
    "name": "flare",
    "children": [{
        "name": "analytics",
        "children": [{
            "name": "cluster",
            "children": [{
                "name": "AgglomerativeCluster",
                "size": 3938
            }, {
                "name": "CommunityStructure",
                "size": 3812
            }, {
                "name": "HierarchicalCluster",
                "size": 6714
            }]
        }, {
            "name": "graph",
            "children": [{
                "name": "BetweennessCentrality",
                "size": 3534
            }, {
                "name": "LinkDistance",
                "size": 5731
            }]
        }]
    }, {
        "name": "animate",
        "children": [{
            "name": "Easing",
            "size": 17010
        }, {
            "name": "FunctionSequence",
            "size": 5842
        }, {
            "name": "Transitioner",
            "size": 19975
        }, {
            "name": "TransitionEvent",
            "size": 1116
        }, {
            "name": "Tween",
            "size": 6006
        }]
    }]
};
root = flare;
var nodes = cluster.nodes(root),
    links = cluster.links(nodes);

var link = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")";
    })


node.append("circle")
    .attr("r", 10);


node.append("svg:image")
    .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
    .attr("clip-path", "url(#circleCip)")
    .attr("x", function(d) {
        return -imgRadius;
    })
    .attr("y", function(d) {
        return -imgRadius;
    })
    .attr("width", function(d) {
        return imgRadius * 2;
    })
    .attr("height", function(d) {
        return imgRadius * 2;
    });


node.append("text")
    .attr("dx", function(d) {
        return d.children ? -8 : 8;
    })
    .attr("dy", 3)
    .style("text-anchor", function(d) {
        return d.children ? "end" : "start";
    })
    .text(function(d) {
        return d.name;
    });

d3.select(self.frameElement).style("height", height + "px");
console.log(d3);

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

使用 d3.js 将图像插入树状图的叶子中

Insert images into dendogram's leaves using d3.js

javascript

html

d3.js

data-visualization