标签未显示在 d3 sunburst 图表上
Labels not displaying on d3 sunburst chart
我正在尝试使用 D3 在旭日图上显示标签。我尝试为每个切片添加标签,但它不起作用。我究竟做错了什么?我查找了几个类似的问题,但无法确定。谢谢你的时间。
这是 fiddle:https://jsfiddle.net/4mx4jsdw/
这是我用来推入文本的代码,暂时我将旋转设置为 30 度:
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter()
.append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors(d.name); })
.style("opacity", 1)
.on("mouseover", mouseover)
.append("text")
.text(function(d) { console.log("Q", d.name); return d.name})
.attr("x", function(d) { return d.x; })
.attr("text-anchor", "middle")
// translate to the desired point and set the rotation
.attr("transform", function(d) {
if (d.depth > 0) {
return "translate(" + arc.centroid(d) + ")" +
"rotate(" + 30 + ")";
}
else {
return null;
}
})
所以我阅读了一些 d3 文档并意识到如果我们使用圆形元素,我们需要使用 "g" 标签分别绑定 svg 和文本。所以我只需要再添加一行代码:
.append("g")
进入此区块:
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter()
.append("svg:path")
所以最后的块看起来像这样:
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter()
.append("g")
path.append("svg:path")
这是working fiddle。我仍在尝试完美地旋转文本,但是,嘿,它有效!
我正在尝试使用 D3 在旭日图上显示标签。我尝试为每个切片添加标签,但它不起作用。我究竟做错了什么?我查找了几个类似的问题,但无法确定。谢谢你的时间。
这是 fiddle:https://jsfiddle.net/4mx4jsdw/
这是我用来推入文本的代码,暂时我将旋转设置为 30 度:
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter()
.append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors(d.name); })
.style("opacity", 1)
.on("mouseover", mouseover)
.append("text")
.text(function(d) { console.log("Q", d.name); return d.name})
.attr("x", function(d) { return d.x; })
.attr("text-anchor", "middle")
// translate to the desired point and set the rotation
.attr("transform", function(d) {
if (d.depth > 0) {
return "translate(" + arc.centroid(d) + ")" +
"rotate(" + 30 + ")";
}
else {
return null;
}
})
所以我阅读了一些 d3 文档并意识到如果我们使用圆形元素,我们需要使用 "g" 标签分别绑定 svg 和文本。所以我只需要再添加一行代码:
.append("g")
进入此区块:
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter()
.append("svg:path")
所以最后的块看起来像这样:
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter()
.append("g")
path.append("svg:path")
这是working fiddle。我仍在尝试完美地旋转文本,但是,嘿,它有效!