有人可以告诉我如何将图像放置到d3树形图中。 最终,我想嵌套3个层次结构,但是现在,我只需要带有大约20张图像的简单“平面”树形图
答案 0 :(得分:0)
我分叉了Mike's示例,并创建了带有图像的树形图。您可以找到它here
我使用this作为基础并添加了评论。
希望这会有所帮助
<!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>