我是D3的新手，并取得了一些进展，但这个问题完全困扰了我。我似乎无法将文本放入圆圈中。我没有什么太花哨的东西，我想只要简单的换行就可以了。
这是我生成圆圈和文本的示例代码。
graph
.selectAll('circle')
.data(this.nodes)
.enter()
.append('circle')
.attr('r', 30)
graph
.selectAll('text')
.data(this.nodes)
.enter()
.append('text')
.attr('x', 0)
.attr('y', '.31em')
.attr('text-anchor', 'middle')
.text((d: Vertex) => d.name)
我试过添加tspan，但无法使其发挥作用。
我建议您尝试使用D3的d3plus插件，这里有一个例子：
// Wrap text in a rectangle.
d3plus.textwrap()
.container(d3.select("#rectWrap"))
.draw();
// Wrap text in a rectangle, and size the text to fit.
d3plus.textwrap()
.container(d3.select("#rectResize"))
.resize(true)
.draw();
// Wrap text in a circle.
d3plus.textwrap()
.container(d3.select("#circleWrap"))
.draw();
// Wrap text in a circle, and size the text to fit.
d3plus.textwrap()
.container(d3.select("#circleResize"))
.resize(true)
.draw();svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 425px;
margin: 25px;
width: 900px;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: #eee;
stroke: #ccc;
}<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<svg>
<!-- Text that will use the D3plus default wrapping. -->
<text class="type" dy="15px" x="75px">Wrapped</text>
<rect class="shape" height="150px" width="150px" y="50px"></rect>
<text id="rectWrap" class="wrap" y="50px" font-size="12">
Here is a long text string that SVG should wrap by default, but it does not.
</text>
<circle class="shape" r="75px" cx="75px" cy="300px"></circle>
<text id="circleWrap" class="wrap" y="225px" x="0px" font-size="12">
Here is a long text string that SVG should wrap by default, but it does not.
</text>
<!-- Text that D3plus will resize to fit the available space. -->
<text class="type" dy="15px" x="275px">Resized</text>
<rect class="shape" height="150px" width="150px" y="50px" x="200px"></rect>
<text id="rectResize" class="wrap" y="50px" x="200px" font-size="12">
Here is a long text string that SVG should wrap by default, but it does not.
</text>
<circle class="shape" r="75px" cx="275px" cy="300px"></circle>
<text id="circleResize" class="wrap" y="225px" x="200px" font-size="12">
Here is a long text string that SVG should wrap by default, but it does not.
</text>
<!-- For comparison, how SVG would display the text without D3plus. -->
<text class="type" dy="15px" x="475px">Default Behavior</text>
<rect class="shape" height="150px" width="150px" y="50px" x="400px"></rect>
<text class="wrap" y="50px" x="400px" font-size="12">
Here is a long text string that SVG should wrap by default, but it does not.
</text>
<circle class="shape" r="75px" cx="475px" cy="300px"></circle>
<text class="wrap" y="225px" x="400px" font-size="12">
Here is a long text string that SVG should wrap by default, but it does not.
</text>
</svg>