如何在d3中的svg圈子中添加文本 [英] How to add text to svg circle in d3

问题描述

我有以下代码，我想在圈子中添加文字.我怎样才能做到这一点?我看过这些可能的重复项

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

在D3图表的圆圈内插入文本

 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);
}

推荐答案

有多种方法可将文本标签添加到圈子.在代码中，您已将title元素添加到圆圈中，当您将鼠标悬停在元素上时，这些元素通常会显示为工具提示.与title元素不同，文本元素不能作为circle元素的子元素添加.处理它们的一种常见方法是使用g元素将circle和相关的text分组在一起，以便随后可以在g上执行任何转换(或删除等)，而不用将它们分别应用于text和circle.

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.

要转换您的代码示例，首先，我已经更改了selectAll/enter代码以使其作用于g元素而不是圆形:

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)

然后可以将circle和text元素附加到node:

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>

这篇关于如何在d3中的svg圈子中添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！