I have a simple object array like this which I am trying to use to create a treemap visualization using D3.js.
(我有一个像这样的简单对象数组,我试图使用它来使用D3.js创建树形图可视化。)
I have implemented the following code to do this:
(我已经实现了以下代码来做到这一点:)
var treemap = d3.select("#treemap")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var root = d3.stratify()(array);
root.sum(function(d) { return +d.value; });
d3.treemap()
.size([width, height])
.padding(4)
(root);
treemap.selectAll('rect')
.data(root.leaves())
.enter()
.append("rect")
.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; })
.style("stroke", "black")
.style("fill", "#69b3a2");
However, it is giving me a 'multiple roots' error message when I try using the array.
(但是,当我尝试使用数组时,它给我一个“多根”错误消息。)
:/ Any help would be much appreciated!(:/ 任何帮助将非常感激!)
ask by Zvintāvé translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…