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。

通过添加缩放来改善序列sunburst

1 个答案: