无法从D3元素访问JSON值

时间:2019-02-14 01:35:41

标签: d3.js

enter image description here

我尝试更改以下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,则饼图会呈现。

第二个问题是,即使代码使用饼图的常量值,也仅渲染右分支饼图,而左分支饼图不渲染。

0 个答案:

没有答案