带有图像的 D3 树状图答案

【问题标题】：D3 treemaps with images带有图像的 D3 树状图
【发布时间】：2019-04-14 01:44:08
【问题描述】：

谁能告诉我如何将图像放入 d3 树图中。最终我想嵌套 3 个层次结构，但现在我只需要包含大约 20 个图像的简单“平面”树形图

【问题讨论】：

【解决方案1】：

我 fork Mike's 示例并创建了一个带有图像的树状图。你可以找到它here

我使用this 作为基础并添加了 cmets。

希望对你有帮助

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
form {
  position: absolute;
  right: 10px;
  top: 10px;
}
.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
</style>
<form>
  <label><input type="radio" name="mode" value="size" checked> Size</label>
  <label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
'use strict';

const margin = {top: 40, right: 10, bottom: 10, left: 10},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom,
      color = d3.scaleOrdinal().range(d3.schemeCategory20c);

const treemap = d3.treemap().size([width, height]);

const div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
	
	// this is the key, the data has to hierarchical with size or value attribute over which the tree will be created
   var data = {
 "name": "flare",
 "children": [
  {
   "name": "parent 1",
   "children": [
    {
     "name": "child 1 parent 1",
	 "size" : 2
    },
    {
     "name": "child 2 parent 1",
	 "size" : 8
    }]
	},
	{
   "name": "parent 2",
   "children": [
    {
     "name": "child 1 parent 2",
	 "size" : 9
    },
    {
     "name": "child 2 parent 2",
	 "size" : 8
    }]
	}
]
};
	// this creates the actual tree object with size of each element based on the size value(based on cumulative size of its children)
  const root = d3.hierarchy(data, (d) => d.children)
    .sum((d) => d.size);

  const tree = treemap(root);
	 
	 
	// appending a div for element in the root and setting size based on the data 
  const node = div.datum(root).selectAll(".node")
      .data(tree.leaves())
    .enter().append("div")
      .attr("class", "node")
      .style("left", (d) => d.x0 + "px")
      .style("top", (d) => d.y0 + "px")
      .style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
      .style("height", (d) => Math.max(0, d.y1 - d.y0  - 1) + "px")
      .style("background", (d) => color(d.parent.data.name))
      .text((d) => d.data.name);

  d3.selectAll("input").on("change", function change() {
    const value = this.value === "count"
        ? (d) => { return d.size ? 1 : 0;}
        : (d) => { return d.size; };

    const newRoot = d3.hierarchy(data, (d) => d.children)
      .sum(value);

    node.data(treemap(newRoot).leaves())
      .transition()
        .duration(1500)
        .style("left", (d) => d.x0 + "px")
        .style("top", (d) => d.y0 + "px")
        .style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
        .style("height", (d) => Math.max(0, d.y1 - d.y0  - 1) + "px")
  });

</script>

【讨论】：

谢谢您，但是您发送的代码对我来说太难了。我才刚刚开始，并希望有一些更简单的东西——可能只有 16 到 20 张图像——只有一个层次结构（目前）。理想情况下，我只想构建一个包含 20 个图像的树梢，并且能够单击其中任何一个并将该图像缩放到根大小。我想在这里使用树顶布局，因为我最终计划至少有另一个级别的嵌套级别，并且还打算通过很酷的过渡动态更改数据