我在尝试将文本定位在基于 d3.js 的 Sunburst 图表的楔形内时遇到问题。text
即使在缩放时,元素似乎也没有按需要定位。
这是我尝试但未成功的代码的简短片段:
var slices = svg.selectAll(".form")
.data(function(d) { return data_slices; })
.enter()
.append("g");
slices.append("path")
.attr("d", arc)
.attr("id",function(d,i){return d[2]+""+i;})
.style("fill", function(d) { return color(d[2]);})
.on("click",animate)
.attr("class","form")
.append("svg:title")
.text(function(d) { return Math.round(d[0]*100)/100 +" , "+ Math.round(d[1]*100)/100; });
//Something needs to change below....
slices.append("text")
.style("font-size", "10px")
.attr("x", function(d) { return y(d[1]); })
.attr("transform", function(d) { return "rotate(" + this.parentNode.getBBox().width + ")"; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d){return d[2]})
.attr("pointer-events","none");
这是图表的 fiddle
Fiddle可能是什么问题?谁能告诉我或指导我如何定位 <text>
内部 svg <path>
.看起来解决方案是对此的一个小调整,但即使尝试了很长时间我也无法得到它..
任何有关解决方案方向的帮助/评论将不胜感激......提前致谢......
最佳答案
我认为这接近您的目标:http://jsfiddle.net/4PS53/3/
所需的更改如下:
function getAngle(d) {
// Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while
// for text it is the X axis.
var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
// If we are rotating the text by more than 90 deg, then "flip" it.
// This is why "text-anchor", "middle" is important, otherwise, this "flip" would
// a little harder.
return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
}
slices.append("text")
.style("font-size", "10px")
.attr("x", function(d) { return d[1]; })
// Rotate around the center of the text, not the bottom left corner
.attr("text-anchor", "middle")
// First translate to the desired point and set the rotation
// Not sure what the intent of using this.parentNode.getBBox().width was here (?)
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")" + "rotate(" + getAngle(d) + ")"; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d){return d[2]})
.attr("pointer-events","none");
现在要使其与缩放一起工作,在引用点发生变化的地方,我们需要更多的基础设施。
- 使
g.form-container
而不仅仅是path.form
可见/不可见。这意味着我们不必担心让标签单独消失。 (我添加了form-container
类。) 计算新点并为其计算
质心
和旋转
。这有点棘手,但不太难:function change_ref(data_point, reference_point) { return [ get_start_angle(data_point, reference_point), get_stop_angle (data_point, reference_point), data_point[2], get_level (data_point, reference_point) ]; } // And while doing transitioning the `text.label`: svg.selectAll('.label') .filter( function (b) { return b[0] >= new_ref[0] && b[1] <= new_ref[1] && b[3] >= new_ref[3]; } ).transition().duration(1000) .attr("transform", function(b) { var b_prime = change_ref(b, d); return "translate(" + arc.centroid(b_prime) + ")" + "rotate(" + getAngle(b_prime) + ")"; })
我已将类
label
添加到text
。
更新的演示: http://jsfiddle.net/4PS53/6/
但是,我认为可能有更好的方式来呈现这些数据,尤其是。如果您允许缩放和平移:D3 put arc labels in a Pie Chart if there is enough space
关于javascript - 如何使用 d3.js 在 Sunburst 图表上定位文本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22622381/