如何使用树形布局改变d3中饼图的大小

Question

我正在尝试使用饼图显示树形图，作为根据数据缩放的饼图大小的节点。我还在最后一部分：

var arc = d3.svg.arc（）。outerRadius（20）

将半径固定为20.

如何根据“count”属性更改它。这里有一个jsfiddle演示：http://jsfiddle.net/uB4U2/

数据包含在：

var treeData = {"name" : "Root", "info" : "1", "count" : 9, "value" : [1,2,3], 
            "children" : [
           {"name" : "A", "info" : "2", "count" : 10, "value" : [2,2,2] }, 
           {"name" : "B", "info" : "3", "count" : 15, "value" : [2,2,2] }, 
           {"name" : "C", "info" : "4", "count" : 2, "value" : [2,2,2] , 
            "children": [
                {"name" : "C1", "info" : "5", "count" : 7, "value" : [2,3,4] }, 
                {"name" : "C2", "info" : "6", "count" : 8, "value" : [2,3,4] }
                    ]} 
            ]};

谢谢！

Answer 1

您的示例显示您尝试根据数据的函数设置outerRadius，但放弃并将其设置为返回常量值：

var arc = d3.svg.arc().outerRadius(function(d) { console.log(d); return radius; });

这不起作用的原因是因为传入弧生成器的数据是饼图中每个 slice 的数据对象。例如，这可用于创建如下图形：

很酷，但不是你想要的。你想根据总数计算整个馅饼的大小，对吧？但是，该数据不能直接用于arc函数，该函数一次只有一个切片的信息。因此，当您仍在使用节点时，需要在整个饼的数据可用时设置半径。因为我们想要修改节点的弧生成器函数，然后在绘制切片时使用它，我们必须将创建饼图的所有内容分组为each()方法调用：

node.each(function(d){
    arc = arc.outerRadius(d.count);

    d3.select(this)
    .selectAll("path")
        .data(function(d){ return pie(d.value); })
    .enter().append("svg:path")
        .attr("d", arc)
        .style("fill", function(d,i){ return color(i) });    
})

通过对代码的更改，您将获得： http://jsfiddle.net/uB4U2/3/

P.S。我对你的“计数”属性有点困惑，因为父母的数量有时小于儿童的数量。如果这不是你想要的，我希望它已经给你足够的信息来弄清楚从哪里开始。 --ABR

Answer 2

根据最大数量创建动态radius。请尝试使用此代码获取最大数量

<强> DEMO

<强> D3.js ：

  var Maxcount = new Array();
  $.each(nodes, function (i,value) {
          Maxcount.push(value.count);
       });
  radius =d3.max(Maxcount);