我是 D3 新手,我正在尝试将 D3 Treemap 从 V3 转换为 V4。我已经阅读了一些信息更新了更新的代码,但我不知道让它工作。
树形图来自 Pivottable.js D3 渲染器。
这是部分。
color = d3.scale.category10();
width = opts.d3.width();
height = opts.d3.height();
treemap = d3.layout.treemap().size([width, height]).sticky(true).value(function(d) {
return d.size;
});
d3.select(result[0]).append("div").style("position", "relative").style("width", width + "px").style("height", height + "px").datum(tree).selectAll(".node").data(treemap.padding([15, 0, 0, 0]).value(function(d) {
return d.value;
}).nodes).enter().append("div").attr("class", "node").style("background", function(d) {
if (d.children != null) {
return "lightgrey";
} else {
return color(d.name);
}
}).text(function(d) {
return d.name;
}).call(function() {
this.style("left", function(d) {
return d.x + "px";
}).style("top", function(d) {
return d.y + "px";
}).style("width", function(d) {
return Math.max(0, d.dx - 1) + "px";
}).style("height", function(d) {
return Math.max(0, d.dy - 1) + "px";
});
});
使用 D3 V4 我会遇到一些错误。
例如“d3.scale.category10”不是一个函数。我将其替换为“d3.scaleOrdinal(d3.schemeCategory10)”。
然后“粘性不是功能”。我用“tile(d3.treemapResquarify)”替换了它。
但我也得到“值不是函数”和“输入不是函数”,这是我无法解决的。而且我不确定是否必须更改其他任何内容才能使其与 D3 V4 一起使用。
这是我现在的代码。但它不起作用。
// Updated to V4
color = d3.scaleOrdinal(d3.schemeCategory10);
width = opts.d3.width();
height = opts.d3.height();
// Updated sticky for V4
treemap = d3.treemap().size([width, height]).tile(d3.treemapResquarify).value(function(d) {
return d.size;
});
d3.select(result[0]).append("div").style("position", "relative").style("width", width + "px").style("height", height + "px").datum(tree).selectAll(".node").data(treemap.padding([15, 0, 0, 0]).value(function(d) {
return d.value;
}).nodes).enter().append("div").attr("class", "node").style("background", function(d) {
if (d.children != null) {
return "lightgrey";
} else {
return color(d.name);
}
}).text(function(d) {
return d.name;
}).call(function() {
this.style("left", function(d) {
return d.x + "px";
}).style("top", function(d) {
return d.y + "px";
}).style("width", function(d) {
return Math.max(0, d.dx - 1) + "px";
}).style("height", function(d) {
return Math.max(0, d.dy - 1) + "px";
});
});
任何人都可以帮我转换其余的吗?
// 编辑这里是工作的 D3 v3 示例小提琴。d3_renderer 在 JS 部分。 https://jsfiddle.net/qntc8e7w/
这是相同的示例,但使用 D3 v4 https://jsfiddle.net/ybctz0a8/