無法在d3.js中獲取d的值
[英]Unable to get values of d in d3.js
問題描述
我正在d3中建立餅圖。 在這種情況下，我非常需要讓標簽伸出，並在切片刻度上附加一條水平線。 這是我的代碼
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;
}
});
為此，我需要使用d變量中的一些值，例如cx，ox，sx。當我在代碼的第一塊中構建圖表時，我正在設置這些值。 問題是當我在打印標簽和刻度時試圖檢索這些值時，我正在獲得“未定義”值。 有人可以指出我在這里做錯了嗎，我需要做點改變嗎？？？ 提前致謝
1 個解決方案
解決方案1
0 2015-07-28 13:06:01
在這里擺弄小玩意會很有幫助...我懷疑問題是，在添加路徑時不需要以下兩行：
.data(pie)
.enter()
這正在重置數據。 如果僅選擇弧svg.selectAll（“ g.arc”），則修改后的數據應該可用。
這是一個未定義值的代碼段（盡管使用上面的數學方法，這些行很奇怪）。
<!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>
無法在D3.js中獲得縮放效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.