D3圈包上的圆圈文字插件

时间:2016-07-06 13:42:58

标签: d3.js text zoom circle-pack

我试图在我的D3圈子包装上放置标签,因为我使用的是circle-text插件。我希望像这个例子circle_pack circle_text那样做。 当我放大节点时,问题在于更新标签位置和它们的光线。

我的代码:

function zoom(d) {

  var k = diameter / d.r / 2;
  x.domain([d.x - d.r, d.x + d.r]);
  y.domain([d.y - d.r, d.y + d.r]);  

  var focus0 = focus; focus = d;


  var transition = d3.transition()
      .duration(d3.event.altKey ? 7500 : 750)
      .tween("zoom", function(d) {
        var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
        return function(t) { zoomTo(i(t)); };
      });


    circleText.radius(function (d) { return k * d.r- 5 ; });
  transition.selectAll('g.label')
     .attr('transform', function(d) {
                     return 'translate(' + x(d.x) + ',' + y(d.y) + ')';})

      .call(circleText);


}

function zoomTo(v) {

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

}

0 个答案:

没有答案