Javascript 通过添加缩放改进序列sunburst

我有一个，它对突出显示路径和着色问题很有效。我试图为这个可视化添加一个过渡

我为创建缩放添加了以下行

 path.on("click", click)
         .each(stash)
         .transition()
         .duration(750)
         .attrTween("d", arcTween); 

单击功能是：

 function click(d){
    d3.select("#container").selectAll("path").remove();

var path = vis.data([d]).selectAll("path")
  .data(nodes)
  .enter().append("svg:path")
  .attr("display", function(d) { return d.depth ? null : "none"; })
  .attr("d", arc)
  .attr("fill-rule", "evenodd")
  .style("fill", function(d) { return d.color; })
  .style("opacity", 1)
  .on("mouseover", mouseover)
  .on("click", click)
  .each(stash)
      .transition()
      .duration(750)
      .attrTween("d", arcTween);
 // Get total size of the tree = value of root node from partition.
  totalSize = path.node().__data__.value;
}

我还添加了以下arcTween和stash函数

 function arcTween(a){
        var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
        return function(t) {
              var b = i(t);
              a.x0 = b.x;
              a.dx0 = b.dx;
              return arc(b);
          };
   };

   function stash(d) {
                d.x0 = 0; // d.x;
                d.dx0 = 0; //d.dx;
            }; 

---

转换不起作用，如果有人可以帮助我在缩放时在此示例上应用缩放

，则必须插入比例，并从二者之间开始转换数据以进行缩放：

function arcTweenZoom(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
    yd = d3.interpolate(y.domain(), [d.y, 1]),
    yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function (d, i) {
    return i ? function (t) {
      return arc(d);
    } : function (t) {
      x.domain(xd(t));
      y.domain(yd(t))
        .range(yr(t));
      return arc(d);
    };
  };
}

我在单击时调用该函数：

function click(d) {
    node = d;
    path.transition()
      .duration(1000)
      .attrTween("d", arcTweenZoom(d));
  }

使用此隐藏代替缩放可能会获得更好的效果：

function stash(d) {
    d.x0 = d.x;
    d.dx0 = d.dx;
  }

另外，我不知道为什么在

路径上有一个转换。如果要设置单选按钮以在大小值或计数（值）值之间切换，则可以将该控件添加到HTML中并按如下方式选择：

d3.selectAll("input")
    .on("change", function change() {
      var value = this.value === "count" ? function () {
        return 1;
      } : function (d) {
        return d.size;
      };
      path.data(partition.value(value)
          .nodes)
        .transition()
        .duration(1000)
        .attrTween("d", arcTweenData);
      totalSize = path.node()
        .__data__.value;
    });

切换数据时，需要使用
arcTweenData
函数在数据空间内插入圆弧：

function arcTweenData(a, i) {
    var oi = d3.interpolate({
      x: a.x0,
      dx: a.dx0
    }, a);

    function tween(t) {
      var b = oi(t);
      a.x0 = b.x;
      a.dx0 = b.dx;
      return arc(b);
    }
    if (i === 0) {
      var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);
      return function (t) {
        x.domain(xd(t));
        return tween(t);
      };
    } else {
      return tween;
    }
  } 

嗯