Question

我正在关注http://bl.ocks.org/mbostock/7607535的示例当通过单击事件放大时，示例中绘制的圆圈的大小会增加。有没有办法创建具有相同效果的可缩放弧。这是我的源代码。请让我知道如何做到这一点：

var w = 1200,
    h = 780;
var svgContainer = d3.select(".Body").append("svg")
  .attr("width", w).attr("height", h).attr("class", "svgBody");
var arc = d3.svg.arc().innerRadius(90).outerRadius(150)
  .startAngle(0.5 * Math.PI).endAngle(1.5 * Math.PI);
var arcpath = svgContainer.attr("id", "arc").append("path").attr("d", arc)
  .attr("transform", "translate(600,0)").style("fill", "#8b0000")
  .on("click", function(d) {
    var pathsize = this.getBBox();
    zoom(d, pathsize), d3.event.stopPropagation();
  });

var view;
function zoom(d, _patsize) {
  console.log(_patsize.x + "  " + _patsize.y + "  " + _patsize.width);
  var transition = d3.transition().duration(d3.event.altKey ? 7500 : 750)
    .tween("zoom", function(d) {

      var i = d3.interpolateZoom(view, [_patsize.x, _patsize.y, _patsize.width]);
      return function(t) {
        zoomTo(i(t));
      };
    });

  function zoomTo(v) {
    var k = w / v[2];
    view = v;
    arcpath.attr("transform", function(d) {
      return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
    });
    node.attr("width", function(d) {
      return d.width * k;
    });
  }
}

我无法设置视图，请让我知道视图是什么？

在d3中创建一个可缩放的弧？

0 个答案: