1

我有一个带缩放的旭日形序列，它适用于突出显示路径和着色问题。我正在尝试为此可视化添加过渡。

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

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

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

4

1 回答 1

0

缩放时，您必须插入比例并以补间开始转换数据以进行缩放：

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。

于 2015-05-24T17:28:10.180 回答