Javascript 如何在D3.js中向可缩放的sunburst图添加textPath标签?
我已经修改并想添加文本标签和一些其他效果。我试着采纳我能找到的每一个例子,但运气不佳。看起来我对D3还不太了解:( 对于标签,我只想使用顶部/父节点的名称,并且它们出现在图表之外(如下图所示)。这不太有效:Javascript 如何在D3.js中向可缩放的sunburst图添加textPath标签?,javascript,d3.js,sunburst-diagram,Javascript,D3.js,Sunburst Diagram,我已经修改并想添加文本标签和一些其他效果。我试着采纳我能找到的每一个例子,但运气不佳。看起来我对D3还不太了解:( 对于标签,我只想使用顶部/父节点的名称,并且它们出现在图表之外(如下图所示)。这不太有效: var label = svg.datum(root) .selectAll("text") .data(partition.nodes(root).slice(0,3)) // just top/parent nodes? .enter().append("text
var label = svg.datum(root)
.selectAll("text")
.data(partition.nodes(root).slice(0,3)) // just top/parent nodes?
.enter().append("text")
.attr("class", "label")
.attr("x", 0) // middle of arc
.attr("dy", -10) // outside last children arcs
/*
.attr("transform", function(d) {
var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90;
console.log(d, angle);
if (Math.floor(angle) == 119) {
console.log("Flip", d)
return ""
} else {
//return "scale(-1 -1)"
}
})
*/
.append("textPath")
.attr("xlink:href", function(d, i) { return "#path_" + i; })
.text(function(d) { return d.name + " X%"; });
我还想修改悬停时的整个树枝,使其向外“移动”。我将如何实现这一点
function mouseover(d) {
d3.select(this) // current element and all its children
.transition()
.duration(250)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); });
// shift arcs outwards
}
function mouseout(d) {
d3.selectAll("path")
.transition()
.duration(250)
.style("fill", "#fff");
// bring arcs back
}
接下来,我想在图的外部添加额外的线/记号,这些线/记号对应于顶部/父节点的边界,并高亮显示它们
var ticks = svg.datum(root).selectAll("line")
.data(partition.nodes) // just top/parent nodes?
.enter().append("svg:line")
.style("fill", "none")
.style("stroke", "#f00");
ticks
.transition()
.ease("elastic")
.duration(750)
.attr("x1", function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.attr("y1", function(d) { return Math.max(0, y(d.y + d.dy)); })
.attr("x2", function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.attr("y2", function(d) { return Math.max(0, y(d.y + d.dy) + radius/10); });
最后,我想限制缩放级别,这样树中的最后一个节点不会启动缩放,而是启动一个URL(将添加到JSON文件中)
function click(d) {
node = d;
path.transition()
.duration(750)
.attrTween("d", arcTweenZoom(d));
}
在此方面的任何帮助都将不胜感激