Как добавить текст в SVG круг в D3 - PullRequest
Новая
       27

Как добавить текст в SVG круг в D3

0 голосов
/ 11 октября 2018

У меня есть следующий код, и я хотел бы добавить текст в кружки.Как я мог сделать это возможным;Я посмотрел на эти возможные дубликаты

Вставить текст внутри круга в диаграмме 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);
}

1 Ответ

0 голосов
/ 11 октября 2018

Существует множество способов добавить текстовые метки в круги.В своем коде вы добавили title элементы в круги, которые обычно отображаются в виде всплывающих подсказок при наведении на элемент.В отличие от элементов title, текстовые элементы нельзя добавлять как дочерние элементы элементов circle.Один из распространенных способов их обработки - использование элементов g для группировки circle и связанных text, чтобы вы могли затем выполнять любые преобразования (или удаления и т. Д.) На g вместочтобы применить их отдельно к text и circle.

Чтобы преобразовать пример кода, сначала я изменил код selectAll / enter так, чтобы он воздействовал на элементы g вместо кругов.: 

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: 

node
  .append("circle")
  .attr('r', 5)

node
  .append("text")
  .text(d => "Node: " + d.id)

Полный пример приведен во фрагменте кода. 

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>
...