Question

我正在使用D3JS进行数据可视化的研究。

我必须在矩形内放置一些信息，而我使用wrap函数拆分内容，不是，我希望将每行（tspan）放置在矩形内。而且我不知道该怎么做，对我来说，任何帮助都是对我的感谢。enter image description here

小矩形将包含信息。有没有人举一个例子。 thakns

Answer 1

有！实际上，您需要为组设置正确的位置。

    var data = [0,1,2,3,4]; // example data
    var selection = svg.selectAll('g').data(data).enter();

    // set position for rects and texts using transform-translate 
    var groups = selection.append('g')
                          .attr('transform', function(d, i) { return 'translate(0,' + i * 35 + ')' });

    groups.append('rect')
          .attr('width', 100)
          .attr('height', 30)
          .attr('fill', 'white')
          .attr('stroke', 'black'); // all rects

    groups.append('text')
          .text((d) => d)
          .attr('font-size', '10px')
          .attr('y', 15); // all texts

另外还有一个link对您来说可能会有所帮助。

将tspan放入矩形D3JS SVG中

1 个答案: