D3 树图 v3 到 v4
Posted
技术标签:
【中文标题】D3 树图 v3 到 v4【英文标题】:D3 Treemap v3 to v4 【发布时间】:2020-10-11 14:02:50 【问题描述】:我是 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/
【问题讨论】:
您能否为这个问题添加一个最小的可重现示例? 我在原帖里加了一个例子。 【参考方案1】: /* The following code is written on the d3.v4.js plugin */
treemap = d3.treemap().size([width, height]).paddingTop(15)
.paddingInner(1);
var div = d3.select(result[0]).append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var root = d3.hierarchy(tree)
root.sum(function(d)
return d.value;
);
var treeObj = treemap(root);
node = div.datum(root).selectAll(".node")
.data(treeObj.descendants())
.enter().append("div")
.attr("class", "node")
.style("left", (d) => d.x0 + "px")
.style("top", (d) => d.y0 + "px")
.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
.style("height", (d) => Math.max(0, d.y1 - d.y0 - 1) + "px")
.style("cursor","pointer")
.style("background", function(d)
if (d.children != null)
return "lightgrey";
else
return color(d.data.name);
)
.text(function(d)
return d.data.name +" ( "+d.value +" )";
)
【讨论】:
我希望它会有所帮助以上是关于D3 树图 v3 到 v4的主要内容,如果未能解决你的问题,请参考以下文章