How to add text to svg circle in d3

浪子不回头ぞ 提交于 2020-01-24 01:10:28

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!