我尝试更改以下d3树代码。我想用稍大的饼图替换圆形元素,这些饼图从节点的json中的两个值绘制,即图像中所示的val1和val2(例如,对于根节点,这些值显示为20,50)。这是最初从这里获取的代码:
https://bl.ocks.org/ajschumacher/65eda1df2b0dd2cf616f
下面是我要更改的update()方法:
function update(source) {
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 180; });
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 +
"," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" :
"#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ?
"end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
****// append pie element here****
color = d3.scale.category20c();
var vis = nodeEnter.append("g")
.attr("x", function(d) {return d.val1;}) ****// d.val1 is accessible here****
.data(function(d) {
var data = []
data.push({"value": d.val1 }) ****// but here get a type error indicating d is undefined****
data.push({"value": d.val2 })
return [data]
});
var arc = d3.svg.arc().innerRadius(0).outerRadius(10);
var pie = d3.layout.pie().value(function(d) {return d.value;});
var arcs = vis.selectAll("arc")
.data(pie)
.enter()
.append("g")
.attr("class", "arc")
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d, i) { return color(i); } );
}
我有两个问题: d变量在append方法内部未定义,如上面的粗体注释所示。如果我用硬编码常量替换d.val1和d.val2,则饼图会呈现。
第二个问题是,即使代码使用饼图的常量值,也仅渲染右分支饼图,而左分支饼图不渲染。