问题
I have the following code and I would like to add text in the circles. How could I make it possible; I have looked at these possible duplicates
Insert text inside Circle in D3 chart
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.enter().append("line")
.attr("stroke-width", d => Math.sqrt(d.value));
// link.append("title").text(d => d.value);
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", d => color(d.group))
.call(drag(simulation));
node.append("title").text(d => "Node: " + d.id);
function ticked() {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
}
回答1:
There are numerous ways to add text labels to circles. In your code, you've added title
elements to the circles, which usually show up as tooltips when you hover over the element. Unlike title
elements, text elements cannot be added as children of the circle
elements. One common way to handle them is to use g
elements to group together the circle
and the related text
, so that you can then perform any transformations (or removals, etc.) on the g
instead of having to apply them separately to text
and circle
.
To convert your code sample, first, I've altered the selectAll
/ enter
code to act on g
elements instead of circles:
const node = svg
[...]
.selectAll('.circle')
.data(nodes)
.enter()
.append('g') // for each item in nodes, add <g class='circle'>
.classed('circle', true)
You can then append the circle
and text
elements to node
:
node
.append("circle")
.attr('r', 5)
node
.append("text")
.text(d => "Node: " + d.id)
See the code snippet for a full example.
var nodes = [{
"x": 80,
"y": 60,
id: 'foo'
}, {
"x": 20,
"y": 70,
id: 'bar'
}, {
"x": 40,
"y": 40,
id: 'baz'
}, {
"x": 50,
"y": 90,
id: 'bop'
}];
const svg = d3.select('svg')
const node = svg
.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll(".circle")
.data(nodes)
.enter()
.append('g')
.classed('circle', true)
.attr('transform', d => 'translate(' + d.x + ',' + d.y + ')');
node
.append("circle")
.attr("r", 5)
.attr("fill", 'deepskyblue')
// .call(drag(simulation));
node
.append("text")
.classed('circleText', true)
.attr('dy', '0.35em')
.attr('dx', 5)
.text(d => "Node: " + d.id);
svg .circleText {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
fill: black;
stroke-width: 0;
}
<script src="http://d3js.org/d3.v5.js"></script>
<svg width="200" height="200"></svg>
来源:https://stackoverflow.com/questions/52754663/how-to-add-text-to-svg-circle-in-d3