我正试图用D3JS创建一个嵌套的树映射，如示例所示，但没有Observer：https://observablehq.com/@d3/嵌套树图
使用以下代码，我总是在以下位置产生错误：
.attr("fill", d => color(d.height))
错误：t不是函数。
如果我在没有颜色的情况下做，我会得到一个错误，说高度和宽度都是nan。我真的不知道如何解决这个问题。
如果我在没有颜色的情况下运行代码，我得到的结果与示例的情况相去甚远：
我的结果
数据是正确的，但我似乎不明白什么能帮助我获得同样的结果/如何以这种方式真正使用D3JS。
提前感谢Sebastian
<!DOCTYPE html>
<meta charset="utf-8">
<title>Cascaded Treemap</title>
<style>
text {
font: 10px sans-serif;
}
tspan:last-child {
font-size: 9px;
fill-opacity: 0.8;
}
.node rect {
shape-rendering: crispEdges;
}
.node--hover rect {
stroke: #000;
}
</style>
<svg width="960" height="1060"></svg>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
d3.json("treemap.json", function(error, data)
{
// var width = svg.attr("width");
// var height = svg.att r("height");
var format = d3.format(",d");
var color = d3.scaleSequential([8, 0], d3.interpolateMagma);
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
;
var treemap =
data => cascade(
d3.treemap()
.size([width, height])
.paddingOuter(3)
.paddingTop(19)
.paddingInner(1)
.round(true)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)),
3 // treemap.paddingOuter
);
function cascade(root, offset) {
const x = new Map;
const y = new Map;
return root.eachAfter(d => {
if (d.children) {
x.set(d, 1 + d3.max(d.children, c => c.x1 === d.x1 - offset ? x.get(c) : NaN));
y.set(d, 1 + d3.max(d.children, c => c.y1 === d.y1 - offset ? y.get(c) : NaN));
} else {
x.set(d, 0);
y.set(d, 0);
}
}).eachBefore(d => {
d.x1 -= 2 * offset * x.get(d);
d.y1 -= 2 * offset * y.get(d);
});
}
const root = treemap(data);
const node = svg
.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
.attr("class", "node")
.each(function(d) { d.node = this; });
node.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}n${format(d.size)}`);
node.append("rect")
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.x1 - d.x0);
node.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#rect-" + d.id + ""; });
node.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.size)))
.enter().append("tspan")
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
node.filter(d => d.children).selectAll("tspan")
.attr("dx", 3)
.attr("y", 13);
node.filter(d => !d.children).selectAll("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`);
});
</script>所缺少的只是此版本d3中scaleSequential的正确使用。使用以下工作来定义color:
var color = d3.scaleSequential(d3.interpolateMagma).domain([8, 0])