为什么我的d3.treemap（）返回的数据差距很大？
学习D3
我正在尝试创建一个描述预算数据的树状图。
预期：树状图内不应有任何空白；描绘每个节点的所有矩形都应该像乐高积木一样适合SVG内部。
实际：我的树形图的矩形在SVG中排列不正确；见下图：
目前，我的数据集还很浅，并且大部分是我所组成的虚拟数据。CSV文件的结构为：
这些是代码中的相关步骤：
步骤1：加载CSV文件后，我使用将该文件转换为层次结构d3.stratify()：
`let dataStratified = d3
.stratify()
.id(function (d) {
return d.Child;
})
.parentId(function (d) {
return d.Parent;
})(results);`
第2步：然后我转到了分层布局d3.treemap()：
let myTreemap = (data) =>
d3.treemap().size([width, height]).padding(1).round(true)(
d3
.hierarchy(data)
.sum((d) => d.data["Rs,millions"])
.sort((a, b) => b.data["Rs,millions"] - a.data["Rs,millions"])
);
const root = myTreemap(dataStratified);
Step 3: Using this Observable notebook as a guide, I proceeded to build the leaves of the treemap:
const leaf = g
.selectAll("g.leaf")
// root.leaves() returns all of the leaf nodes
.data(root.leaves())
.enter()
.append("g")
.attr("class", "leaf")
// position each group at the top left corner of the rect
.attr("transform", (d) => `translate(${d.x0},${d.y0})`)
.style("font-size", 10);
Step 4: And appended it to the SVG I had created:
// Now we append the rects.
leaf
.append("rect")
.attr("id", (d) => d.data.id)
.attr("fill", (d) => {
while (d.depth > 1) d = d.parent;
return color(d.data.data.Child);
})
.attr("opacity", 0.7)
// the width is the right edge position - the left edge position
.attr("width", (d) => d.x1 - d.x0)
// same for height, but bottom - top
.attr("height", (d) => d.y1 - d.y0)
// make corners rounded
.attr("rx", 3)
.attr("ry", 3);
The rest of the code is mostly styling and label placement so I don't think it's relevant to my question here but it can be viewed here: Github or CodeSandbox.
steven
The mis-sized rects are due the total value of the treemap, you are essentially adding up the totals again on the parent node (because it is in the CSV column).
You should only sum if it is the leaf node (meaning if the obj has no children). In short, if you check for children in the hierarchy.sum function, and only sum if there is no children, then it should calculate up the totals correctly
let dataHierarchy = d3
.hierarchy(dataStratified)
.sum(d => (d.children ? 0 : d.data["Rs,millions"]))
.sort((a, b) => b.data["Rs,millions"] - a.data["Rs,millions"]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么我的d3映射函数返回未定义的源属性？
- 2
在 D3 v5 JS 中读取 CSV：为什么我无法获取数据？
- 3
为什么d3更新整个数据
- 4
为什么仅当我将数据放入行函数时才绘制 d3 线？
- 5
为什么在d3中我不能用一个数据集创建一组圆？
- 6
为什么yAxisBar没有显示正确的数据，D3
- 7
R如何找到数据差距并分类差距是否很大
- 8
为什么我的d3强制布局爆炸
- 9
从图像加载数据时，为什么我从 texSubImage3D 收到错误
- 10
为什么我不能在React中从D3js加载外部数据？
- 11
D3.js和嵌套数据-为什么我的exit（）设置为空
- 12
为什么将很大的数字解析为整数返回1
- 13
为什么Number（）返回带有很大整数的错误值？
- 14
为什么在生成实时数据时未创建和删除我的D3.js圈子？
- 15
为什么当我期望错误的原因时，这种语言为什么返回数字3
- 16
为什么我的函数不返回我期望的数据？
- 17
为什么我的TreeMap不排序？
- 18
为什么Double从我的数据库返回错误的数据？
- 19
为什么我的D3 SVG图形上的轴不更新？
- 20
为什么我们需要force.on（d3中的'tick'..
- 21
为什么phantomjs page.render无法捕获我的D3 svg？
- 22
为什么我的轴与 d3 中的视图框不对齐？
- 23
从D3函数返回js数据集
- 24
缠绕到第二行的Bootstrap列与底部对齐，并留出很大的空隙。我如何消除这一差距？
- 25
为什么我的变量表数据返回未定义？
- 26
为什么我的MultiSelectList不返回数据到模型？
- 27
为什么我的MySQL搜索查询返回列名和数据？
- 28
为什么我的 FutureBuilder 不返回任何数据？
- 29
为什么我对SQLite数据库的查询返回null？
我来说两句