html饼图缩放页面时重叠,javascript – 防止D3饼图中的文本重叠

65 阅读 0 评论 43 点赞

我是靠谱客的博主留胡子寒风，最近开发中收集的这篇文章主要介绍html饼图缩放页面时重叠,javascript – 防止D3饼图中的文本重叠，觉得挺不错的，现在分享给大家，希望可以做个参考。

更新：请参阅

D3 put arc labels in a Pie Chart if there is enough space的答案以获得更全面的解决方案.

我不知道任何放置文本元素的通用方法,使它们不重叠.

但是,通过旋转标签和缩放图形以使它们不重叠,可以解决您的问题：http://jsfiddle.net/2uT7F/

// Get the angle on the arc and then rotate by -90 degrees

var getAngle = function (d) {

return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);

};

g.append("text")

.attr("transform", function(d) {

return "translate(" + pos.centroid(d) + ") " +

"rotate(" + getAngle(d) + ")"; })

.attr("dy", 5)

.style("text-anchor", "start")

.text(function(d) { return d.data.label; });

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。