javascript - 通过添加缩放来改进序列旭日

Question

我有一个sequences sunburst with zooming ，它非常适合突出显示路径和颜色问题。我正在尝试为此可视化添加过渡。

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

 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;
            }; 

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

Answer 1

缩放时，必须插入比例并以补间开始过渡数据以进行缩放:

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;
  }

此外，我不确定为什么您的 path 实例化需要转换。如果您想设置单选按钮在大小值或计数(值)之间切换，那么您可以将该控件添加到 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;
    }
  } 

HTH。