(d3.js)如何在弧外创建标签
(d3.js) How to create labels outside arcs?
我正在尝试在一些弧外创建标签。我读过这篇文章:标签外弧(饼图)d3.js但仍然无法实现。不知怎的,DOM中只出现了一个文本标签,而且它的位置不正确。
以下是JSFiddle链接:https://jsfiddle.net/SashimiEthan/rLe9g3bq/
这是我的代码:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="d3.min.js"></script>
</head>
<body>
<script>
var margin = {top: 10, right: 50, bottom: 10, left: 50},
width = 300,
r = width / 2,
labelr = r + 20,
outerRadius = 150,
innerRadius = outerRadius - 30;
numberOfSegments = 12;
radians = (Math.PI * 2) / numberOfSegments;
degrees = 360 / numberOfSegments;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", 530);
for (var j = 0; j < 5; j++) {
var arc = d3.svg.arc()
.innerRadius(innerRadius - j*30)
.outerRadius(outerRadius - j*30)
.startAngle(function (d,i) { return radians * i } )
.endAngle(function (d,i) { return radians * (i + 1) });
var myGroup = svg.append("g")
.attr("transform", "translate(200,200)")
.attr("class","arcgroup")
.selectAll("path").data(d3.range(numberOfSegments))
.enter().append("path")
.attr("class", "seg"+j+"")
.attr("d", arc)
.attr("fill", function(d,i) {
return d3.hsl(i * degrees, 1 - 0.2*j, 0.5)
});
}
var pos = d3.svg.arc()
.innerRadius(innerRadius+30)
.outerRadius(outerRadius+30)
.startAngle(function (d,i) { return radians * i } )
.endAngle(function (d,i) { return radians * (i + 1) });
var label = svg.append("text")
.attr("transform", function(d,i) {
return "translate(" + pos.centroid(d,i) + ")";
})
.attr("text-anchor", "middle")
.text(function(d,i){
return i*degrees + "°";
});
</script>
</body>
</html>
非常感谢!
您在没有选择的情况下处理svg:您只附加了一个元素,没有附加任何数据,这就是为什么transform
函数中的d=undefined
和i=0
。
像在小组创作中一样使用选择:类似的东西
var selection = svg.append("g").attr("transform", "translate(200,200)").
selectAll("text").data(d3.range(numberOfSegments)).enter()
var label = selection.append("text")
.attr("transform", function (d) {
return "translate(" + pos.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d * degrees + "°";
});
还有一个演示(标签的定位可能需要一些工作,但这应该让你开始)
var margin = {
top: 10,
right: 50,
bottom: 10,
left: 50
},
width = 300,
r = width / 2,
labelr = r + 20,
outerRadius = 150,
innerRadius = outerRadius - 30;
numberOfSegments = 12;
radians = (Math.PI * 2) / numberOfSegments;
degrees = 360 / numberOfSegments;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", 530);
for (var j = 0; j < 5; j++) {
var arc = d3.svg.arc()
.innerRadius(innerRadius - j * 30)
.outerRadius(outerRadius - j * 30)
.startAngle(function (d, i) {
return radians * i
}).endAngle(function (d, i) {
return radians * (i + 1)
});
var myGroup = svg.append("g")
.attr("transform", "translate(200,200)")
.attr("class", "arcgroup")
.selectAll("path").data(d3.range(numberOfSegments))
.enter().append("path")
.attr("class", "seg" + j + "")
.attr("d", arc)
.attr("fill", function (d, i) {
return d3.hsl(i * degrees, 1 - 0.2 * j, 0.5)
});
}
var pos = d3.svg.arc()
.innerRadius(innerRadius+30)
.outerRadius(outerRadius+30)
.startAngle(function (d) {
return radians * d
}).endAngle(function (d) {
return radians * (d + 1)
});
var selection = svg.append("g").attr("transform", "translate(200,200)").
selectAll("text").data(d3.range(numberOfSegments)).enter()
var label = selection.append("text")
.attr("transform", function (d) {
return "translate(" + pos.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d * degrees + "°";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
相关文章:
- 在一个javascript文件中为整个网站创建标签
- 如何创建一个表并在单击按钮时插入此标签和文本字段
- 标签的rggraph问题Above未出现在第二个图形创建中
- 在服务器端创建html元素VS将数据作为JSON获取,并使用javascript创建标签
- 如何使用 js 动态创建 标签列表
- 如何在我的版式扩展程序中创建标签页
- 在 JavaScript 中创建标签以添加指向文本行的链接
- jquery,ajax,从Blogger json feed创建标签数组
- ng-重复而不创建标签
- (d3.js)如何在弧外创建标签
- 使用Javascript动态创建标签
- 使用jQuery和HTML动态创建标签,并使用jQuery访问其文本值
- 无法在javascript中增加动态创建标签的宽度
- 如何创建标签而不关闭弹出
- 动态创建标签上的两个onchange事件
- 我想通过for循环使用jquery创建标签
- 使用javascript动态创建标签,并在服务器端获取此标签
- 使用Backbone.js创建标签,下拉框
- 在d3.js中的STACKED GROUP条形图上创建标签
- 使用JavaScript创建标签数组