时间戳

首页 > 解决方案 > 带有图像的 D3 树状图

d3.js - 带有图像的 D3 树状图

问题描述

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

标签： d3.jstreemap

解决方案

我分叉了Mike 的示例并创建了一个带有图像的树形图。你可以在这里找到

我以此为基础并添加了评论。

希望这可以帮助

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

推荐阅读