javascript - 无法将 JSON 数据嵌入(&理解)到 Treemap
问题描述
所以我对 d3 真的很陌生,而且我刚刚开始使用数据可视化。所以我尝试使用mike bostok 树图来可视化我的数据。我对父节点和子节点有一定的了解,但在理解或编写与节点相关的代码时,我不知所措。
bostoks JSON 数据有多个级别或深度,而我的有一个根节点和一组对象,它们都在相同的深度。
Javascript代码
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
format = d3.format(",d");
var treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([width, height])
.round(true)
.paddingInner(1);
d3.json("data.json", function(data) {
var root = d3.hierarchy(data)
.eachBefore(function(d) {
d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
.sum(sumBySize)
.sort(function(a, b) {
return b.height - a.height || b.value - a.value; });
treemap(root);
console.log(d.data.id);
var cell = svg.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
cell.append("rect")
.attr("id", function(d) { return d.data.id; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
//.attr("fill", function(d) { return color(d.parent.data.id); });
cell.append("clipPath")
.attr("id", function(d) { return "clip-" + d.data.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.data.id; });
cell.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
.selectAll("tspan")
.data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
.enter().append("tspan")
.attr("x", 4)
.attr("y", function(d, i) { return 13 + i * 10; })
.text(function(d) { return d; });
cell.append("title")
.text(function(d) { return d.data.id + "\n" + format(d.value); });
d3.selectAll("input")
.data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; })
.on("change", changed);
var timeout = d3.timeout(function() {
d3.select("input[value=\"sumByCount\"]")
.property("checked", true)
.dispatch("change");
}, 2000);
function changed(sum) {
timeout.stop();
treemap(root.sum(sum));
cell.transition()
.duration(750)
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
.select("rect")
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; });
}
});
function sumByCount(d) {
return d.children ? 0 : 1;
}
function sumBySize(d) {
return d.size;
}
有人可以帮我解决这个问题。我认为这与等级制度有关。我想我可能需要在这里改变一些东西
d3.json("data.json", function(data) {
var root = d3.hierarchy(data)
.eachBefore(function(d) {
d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
我很感激任何帮助
解决方案
推荐阅读
- javascript - 如何手动关闭 ant design 下拉菜单?
- javascript - 无法将脚本导入另一个脚本
- struct - Rust 哪些数据包含一个已分配结构的变量
- python - 如何在 Dense 或 Flatten 层之后应用 Conv1D:ValueError:形状 (1, 1, 3) 和 (1, 1) 不兼容
- node.js - 此处理程序的正确类型是什么
- informatica - 如何在值中添加缺失的字符
- html - CSS避免ul列表项浮动到框
- php - PHP 中的图像库
- javascript - Javascript if 语句或运算符不起作用
- apify - 使用apifycheerio,apify基本爬虫可以达到多少RPS(每秒请求)