Question

Lars Kotthof对如何创建与文本大小相对应的SVG元素有一个很好的解释here。但是，我希望使用从JSON或CSV中提取的数据动态执行此操作。

    svg.selectAll('rect')
       .data(states.features)
       .enter()
       .append('rect')
          .attrs({
            x: function(d) { return path.centroid(d)[0] - 50; },
            y: function(d) { return path.centroid(d)[1] - 13; },
            'text-anchor': 'middle',
            'width': 100,
            'height': 18,
            'fill': 'rgba(232, 232, 232, 0.8)',
            'opacity': 1,
            'rx': 7,
            'ry': 7
         }); 

    svg.selectAll('text')
       .data(states.features)
       .enter()
       .append('text')
          .text(function(d) { return d.properties.name; })
          .attrs({
            x: function(d) { return path.centroid(d)[0]; },
            y: function(d) { return path.centroid(d)[1]; },
            'text-anchor': 'middle',
            'font-size': '7pt',
            'fill': 'rgb(25,25,25)',
            'opacity': 1
         });

我没有理解的概念是我如何编写一个类似于Lars的函数，它创建了<rect>和<text>并使用了用于确定矩形尺寸的文本。

Answer 1

这是一个解决方案和相关的JS Fiddle。基本上我所做的是为每个rect和text分配相应的ID，然后在生成文本之后，根据文本调整rect大小。此外，文本的x位置也必须相应调整。

svg.selectAll('rect')
   .data(states.features)
   .enter()
   .append('rect')
      .attrs({
        y: function(d) { return path.centroid(d)[1] - 13; },
        'text-anchor': 'middle',
        'width': 100,
        'height': 18,
        'fill': 'rgba(232, 232, 232, 0.8)',
        'opacity': 1,
        'rx': 7,
        'ry': 7
     }); 

svg.selectAll('text')
   .data(states.features)
   .enter()
   .append('text')
      .text(function(d) { return d.properties.name; })
      .attrs({
        x: function(d) { return path.centroid(d)[0]; },
        y: function(d) { return path.centroid(d)[1]; },
        'text-anchor': 'middle',
        'font-size': '7pt',
        'fill': 'rgb(25,25,25)',
        'opacity': 1,
        id: function(d) { return 'text' + d.id }
     });   

svg.selectAll('rect')
    .attr('width', function(d) { return document.getElementById('text'+d.id).getBBox().width; })
    .attr('x', function(d) { return path.centroid(d)[0] - document.getElementById('text'+d.id).getBBox().width / 2; });

使用d3生成适合文本大小的rect

1 个答案: