无法在d3.js中获取d的值
[英]Unable to get values of d in d3.js
问题描述
I am building a pie chart in d3. 
我正在d3中建立饼图。 In this I have a very specific need to have labels extruding out with a horizontal line attached to the slice ticks. 在这种情况下，我非常需要让标签伸出，并在切片刻度上附加一条水平线。 Here is my code 这是我的代码
svg.selectAll("g.arc")
.data(pie)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("x", function(d) {
var a = 180-(d.startAngle + (d.endAngle - d.startAngle)/2)-45 - Math.PI/2;
d.cx = Math.cos(a) * (radius - 75);
return d.x =(width/3)+ Math.cos(a) * (oldRadius - 20);
})
.attr("y", function(d) {
var a = 180-(d.startAngle + (d.endAngle - d.startAngle)/2)-45 - Math.PI/2;
d.cy = Math.sin(a) * (radius - 75);
return d.y =(height/2)- Math.sin(a) * (oldRadius - 20);
})
.text(function(d) { return d.value; })
.each(function(d) {
var bbox = this.getBBox();
d.sx = d.x - bbox.width/2 - 2;
d.ox = d.x + bbox.width/2 + 2;
d.sy = d.oy = d.y + 5;
});
svg.append("defs").append("marker")
.attr("id", "circ")
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("refX", 3)
.attr("refY", 3)
.append("circle")
.attr("cx", 3)
.attr("cy", 3)
.attr("r", 3);
svg.selectAll("g.arc")
.data(pie)
.enter()
.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "black")
.attr("marker-end", "url(#circ)")
.attr("d", function(d,i) {
alert(d.cx);
if(d.cx > d.ox) {
return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
} else {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
});
For this i need to use some values like cx,ox,sx from d variable.I am setting these values when i am building the chart in the first block of code. 为此，我需要使用d变量中的一些值，例如cx，ox，sx。当我在代码的第一块中构建图表时，我正在设置这些值。 The problem is when I am trying to retrieve these values when I am printing labels and ticks,i am getting 'undefined' values. 问题是当我在打印标签和刻度时试图检索这些值时，我正在获得“未定义”值。 Can anybody point out what i am doing wrong here,do i need to change something??? 有人可以指出我在这里做错了吗，我需要做点改变吗？？？ Thanks in advance 提前致谢
1 个解决方案
解决方案1
0 2015-07-28 13:06:01
A fiddle would be helpful here... I suspect that the issue is that you don't need the following two lines when appending the paths: 在这里摆弄小玩意会很有帮助...我怀疑问题是，在添加路径时不需要以下两行：
.data(pie)
.enter()
This is resetting the data. 这正在重置数据。 If you just select the arcs, svg.selectAll("g.arc"), the modified data should be available. 如果仅选择弧svg.selectAll（“ g.arc”），则修改后的数据应该可用。
Here is a snippet where the values are not undefined (although using your math above, the lines are wonky). 这是一个未定义值的代码段（尽管使用上面的数学方法，这些行很奇怪）。
<!DOCTYPE html> <html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .arc path { stroke: #fff; } </style> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var width = 200, height = 200, radius = Math.min(width, height) / 2; var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var data = [ {age: "<5", population: "2704659"}, {age: "5-13", population: "4499890"}, {age: "14-17", population: "2159981"}, {age: "18-24", population: "3853788"}, {age: "25-44", population: "14106543"}, {age: "45-64", population: "8819342"}, {age: "≥65", population: "612463"}]; var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.population; }); var svg = d3.select("body").append("svg") .attr("width", 600) .attr("height", 600) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); data.forEach(function(d) { d.population = +d.population; }); var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data.age); }); var oldRadius = radius / 2; svg.selectAll("g.arc") .append("text") .attr("text-anchor", "middle") .attr("x", function (d) { var a = 180 - (d.startAngle + (d.endAngle - d.startAngle) / 2) - 45 - Math.PI / 2; d.cx = Math.cos(a) * (radius - 75); dx = (width / 3) + Math.cos(a) * (oldRadius - 20); return dx; }) .attr("y", function (d) { var a = 180 - (d.startAngle + (d.endAngle - d.startAngle) / 2) - 45 - Math.PI / 2; d.cy = Math.sin(a) * (radius - 75); dy = (height / 2) - Math.sin(a) * (oldRadius - 20); return dy; }) .text(function (d) { return d.data.population; }) .each(function (d) { var bbox = this.getBBox(); d.sx = dx - bbox.width / 2 - 2; d.ox = dx + bbox.width / 2 + 2; d.sy = d.oy = dy + 5; }); svg.append("defs").append("marker") .attr("id", "circ") .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("refX", 3) .attr("refY", 3) .append("circle") .attr("cx", 3) .attr("cy", 3) .attr("r", 3); svg.selectAll("g.arc") .append("path") .attr("class", "pointer") .style("fill", "none") .style("stroke", "black") .attr("marker-end", "url(#circ)") .attr("d", function (d, i) { if (d.cx > d.ox) { return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; } else { return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; } }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.