在d3.js多级饼图中添加文本
adding text in d3.js multi level pie chart
我想要一个多层饼图,比如这里:
我唯一没有做的就是如何在饼图中添加文本。我希望每个分段都有一个标签。现在我知道如何为单层饼图做到这一点,但我在多层饼图中没有成功。例如,如果有人能在jsfiddle上展示一个例子,那将不胜感激!
http://jsfiddle.net/Qh9X5/304/
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
Javascript
var dataset = {
apples: [33.3, 33.3, 33.4],
oranges: [12.5, 12.5, 12.5, 12.5, 12.5, 12.5, 12.5, 12.5],
lemons: [20, 20, 20, 20, 20],
};
var width = 660,
height = 500,
cwidth = 75;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });
d3.svg.arc.centroid是一种在弧中心获取点的方便方法,这是标签的一个好起点。
这是另一个类似的问题,显示了一些额外的定位。标签外弧(饼图)d3.js
相关文章:
- 在highcharts.js中向点弹出窗口动态添加文本
- 向d3圆添加文本
- 如何在已经有图标的滚动到顶部按钮中添加文本
- 如何在背景图像上添加文本
- 如何使用javascript在asp.net网页表单上动态添加文本框
- 如何从DIV数组向DIV添加文本
- 我可以通过javascript在鼠标光标旁边动态添加文本吗?
- 如何使用 jQuery 在文本区域中的每一行添加文本
- 单击向输入添加文本值的链接
- 使用.html()添加文本输入时出现意外行为
- 在d3.js中添加文本标签以强制定向图链接
- 当我尝试添加文本效果时,有东西阻止了JavaScript的运行'手风琴'在html文档中
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- 通过在 JavaScript 中使用正文标签的 ID 向
标签添加文本
- JavaScript在段落中的页面加载后添加文本
- eventListner,用于在另一个文本框获得焦点时添加文本框(vanilla-js)
- 如何根据复选框在输入中添加文本
- Bootstrap 3通过点击按钮添加文本并显示在新选项卡中
- 用户动态添加文本框时,文本框中的echo值
- jqueryTe正在添加文本