Question

我有这个代码，我认为是版本4.（我写的小提琴错误）不知道如何将数据传递给版本4中的包。我不需要总和，但我需要更改一些访问者

这是一个适用于d3 v3的小提琴，但如果你改为没有库，它将使用版本4。 v3 to 4 fiddle

我已经走到这一步但没有图表 no chart

var countsByParent = d3.nest()
   .key(node => node.parent)
   .key(node => node.SkillGroup)
    //.key(node => node.AgtName)
    //.rollup(function(leaves) { return leaves.length;})
   .entries(data);

   var treeRoot = {
   key: "root",
   parent: null,
   value: "100",
   values: countsByParent
  };

    var width = 700,
     height = 500;

     var canvas = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g   ")
      .attr("transform", "translate(50, 50)")



var pack = d3.layout.pack() 
            .size([width, height - 50]) 
            .children(function(d){ return d.values; }) 
            .value(function(d){ return d.value; }) 
            .padding(10);


var nodes = pack.nodes(treeRoot);
//console.log(nodes);

var node = canvas.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  //.attr("class", ".node")
  .attr("class", function(d) {
    return "node " + d.AgtName;
  })
  .attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
  })
  .attr("fill", "steelblue")
  .on("mouseover", function(d) {
    highlight(d.AgtName);
  })
  .on("mouseout", function(d) {
    highlight(null);
  });

Answer 1

需要将节点数组传递给选择：

var nodes = pack(root).descendants();

这是您更新的fiddle。

d3版本4圈包传递数据

1 个答案: