Javascript 使用d3.js将图像插入dendogram的叶子_Javascript_Html_D3.js_Data Visualization

Javascript 使用d3.js将图像插入dendogram的叶子

javascript html d3.js

Javascript 使用d3.js将图像插入dendogram的叶子,javascript,html,d3.js,data-visualization,Javascript,Html,D3.js,Data Visualization,我正在使用。我想根据我的聚类结果将图像插入到密度图的叶子中。我该怎么做 <!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

我正在使用。我想根据我的聚类结果将图像插入到密度图的叶子中。我该怎么做

    <!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.appendimage .attrxlink:href，http://www.e-pint.com/epint.jpg.

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

请检查此项

下面是向叶子添加图像的代码：

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

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

.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以获得完整示例。

检查此项

下面是向叶子添加图像的代码：

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

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

.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);

查看上面的JSFIDLE查看完整示例。

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

示例代码：

演示

可变宽度=960，高度=2200； var cluster=d3.layout.cluster .尺寸[高度、宽度-160]； var diagonal=d3.svg.diagonal .projectionfunctiond{ 返回[d.y，d.x]； }; var svg=d3.selectbody.appendsvg .宽度，宽度 .身高,身高,； svg.appendg .attrtransform，translate40,0； var imgRadius=10-1.5//10为节点半径，1.5为笔划宽度 svg.appenddefs .附录Clippath .attr'id'，circleCip A.附加圆 .attrr，梯度； var flare={ 名称：flare，儿童：[{ 名称：分析，儿童：[{ 名称：集群，儿童：[{ 名称：凝聚群，尺码：3938 }, { 名称：社区结构，尺码：3812 }, { 名称：HierarchicalCluster，尺码：6714 }] }, { 名称：graph，儿童：[{ 名称：中间分心，尺码：3534 }, { 名称：LinkDistance，尺码：5731 }] }] }, { 名称：动画，儿童：[{ 名称:香港，尺码：17010 }, { 名称：FunctionSequence，尺码：5842 }, { 姓名：过境者，尺码：19975 }, { 名称：TransitionEvent，尺码：1116 }, { 姓名：吐温，尺寸：6006 }] }] }; 根=耀斑； var nodes=cluster.nodesroot， links=cluster.linksnodes； var link=svg.selectAll.link .数据链 .enter.appendpath .attr类，链接 .attrd，对角线； var node=svg.selectAll.node .数据节点 .enter.appendg .attr类、节点 .attr转换，函数{ 返回translate+d.y+，+d.x+； } node.appendcircle .attrr，10岁； appendsvg:image .attrxlink:href，http://www.e-pint.com/epint.jpg .attrclip路径，urlcircleCip .attrx，函数d{ 返回-梯度； } .attry，函数d{ 返回-梯度； } .attrwidth，函数d{ 返回梯度*2； } .attr高度，功能{ 返回梯度*2； }; node.appendtext .attrdx，函数d{ 返回d.children？-8:8； } 阿特迪先生，3岁 .styletext锚定，函数为{ 返回d.children？结束：开始； } .textfunctiond{ 返回d.name； }; d3.选择self.frameElement.styleheight，height+px； console.logd3； .节点圆{ 填充：fff；笔画：钢蓝；笔划宽度：1.5px； } .节点{ 字体：10px无衬线； } .链接{ 填充：无；中风：ccc；笔划宽度：1.5px； } 您可以使用svg clipPath用图像填充圆圈

示例代码：

演示

我编辑了这个问题，你能检查一下吗？我编辑了这个问题，你能检查一下吗？非常感谢。除此之外，我如何在每片叶子上显示不同的图像？非常感谢。除此之外，我怎样才能在每片叶子上展示不同的图像呢？非常感谢你，非常感谢，非常感谢