javascript - 带有 D3 的类文档暴晒图？

Question

Docuburst可用于生成这样的图表：

看起来 Docuburst 是用 编写的Prefuse，而不是用 D3 编写的。

该图类似于众所周知的使用分区布局的 D3 图：（最大的区别是显示标签的方法）

是否有任何支持第一张图片中显示的圆形标签的 D3 分区布局（旭日形）示例？

如果您想要一些没有标签处理的示例，这里是jsfiddle，取自另一个 Q&A；还有一个jsfiddle，这个已经有标签了。

---

这是D3我正在研究的一个小测试示例：

jsfiddle

我设法使文本在圆形区域居中，但现在我需要找到正确的文本大小。

Answer 1

您可以很容易地沿着弧形路径运行文本。

group.append("svg:text")    
    .attr("dx", function (d) {
        var c = arc.centroid(d);
        return c[0];
    })
    .attr("dy", "30")
    .append("textPath")
    .attr("xlink:href", function(d){
        return "#" + d.name;
    })
    .text(function (d) {
        return d.name;
    });

xlink:href路径在哪里id。*注意**我在这里作弊，只是使用名称，所以要小心它可能不是唯一的：

.attr("id", function(d){
    return d.name;
})

这是一个更新的小提琴。

在那个例子中，只有 3 个文本适合该弧，当它不适合时它会变得疯狂。因此，下一步是将路径的大小与进行比较，textpath.getComputedTextLength如果不合适，则写入旋转的文本。