小编use*_*622的帖子

D3.js - 如何防止圆圈和文本重叠

对于每个json,创建一个圆,并随机输出x和y

for(var d = 0; d<json.length; d++){
circlexloc[d] = ((Math.random()*2*r)-r);
circleyloc[d] = ((Math.random()*2*r)-r);
};
Run Code Online (Sandbox Code Playgroud)

声明圆形变量,同时设置属性和动画

var circle = svg.selectAll("circle").data(json)

circle.enter().append('circle')
Run Code Online (Sandbox Code Playgroud)

动画

circle.transition()
  .duration(1000)
  .attr("fill", "blue")
  .attr('opacity',0.6)
  .attr('r', 5)

  .attr("cx", function(d, i) {return circlexloc[i] })
  .attr("cy", function(d, i) {return circleyloc[i] });

circle.exit().transition().duration(1000)
  .attr('opacity',0)
  .attr("r",0)
  .remove();
Run Code Online (Sandbox Code Playgroud)

将技术附加到圈子

 var text = svg.selectAll('text')
text.data(json)
.enter().append("svg:text")
.style("font-size", "10px")
.text(function(d) { return d.TechName; })
.transition().duration(1000) 
.attr('opacity', 1)       
.attr("x", function (d, i) { return (circlexloc[i]+6)})
.attr("y", function (d, i) { return (circleyloc[i]+4)});
Run Code Online (Sandbox Code Playgroud)

});

此刻,有时候相互倾斜.我怎么能阻止这个?建议和示例将不胜感激 - 谢谢.

javascript d3.js

5
推荐指数
1
解决办法
6902
查看次数

标签 统计

d3.js ×1

javascript ×1