Question

我有这段代码，其中绘制了圆圈，我需要在每个圆圈内放置一个文本，我还想知道如何为圆圈的每个元素添加一定的大小。非常感谢你。

  svg = d3.select(selector)
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  // Bind nodes data to what will become DOM elements to represent them.
  bubbles = svg.selectAll('.bubble')
    .data(nodes, function (d) { return d.id; });

  // Create new circle elements each with class `bubble`.
  // There will be one circle.bubble for each object in the nodes array.
  // Initially, their radius (r attribute) will be 0.



  bubbles.enter().append('circle')
    .classed('bubble', true)
    .attr('r', 0)
    .attr('fill', function (d) {  return  fillColor(d.group); })
    .attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
    .attr('stroke-width', 2)
    .on('mouseover', showDetail)
    .on('mouseout', hideDetail);


  // Fancy transition to make bubbles appear, ending with the
  // correct radius
  bubbles.transition()
    .duration(2000)
    .attr('r', function (d) { return d.radius; });

Answer 1

一个好的做法是为每个气泡创建一个组元素，因为它们将由两个元素组成 - 圆形和文本。

circles = bubbles.append('circle')
  .attr('r', 0)
  .attr('stroke-width', 2)


texts = bubbles.append('text')
  .attr('text-anchor', 'middle')
  .attr('alignment-baseline', 'middle')
  .style('font-size', d => d.radius * 0.4 + 'px')
  .attr('fill-opacity', 0)
  .attr('fill', 'white')
  .text(d => d.text)

// Fancy transition to make bubbles appear, ending with the
// correct radius
circles.transition()
  .duration(2000)
  .attr('r', function(d) {
    return d.radius;
  });

之后，可以附加圆圈和文字：

fill-opacity

对于隐藏/显示文本，您可以使用function showDetail(d, i) { d3.select(this.childNodes[1]).attr('fill-opacity', 1) } function hideDetail(d, i) { d3.select(this.childNodes[1]).attr('fill-opacity', 0) }属性并在隐藏文本时将其设置为0，如果应该显示则设置为1：

    compile 'com.google.code.gson:gson:2.7'

示例：https://jsfiddle.net/r880wm24/

使用将文本放在圆圈中间。 d3.js

1 个答案: