D3 v4 条形图不显示标签

debugcn 发表于 Dev

史蒂夫·宋

我正在努力为 D3 版本 4 图表中的各个条形添加垂直标签。我认为问题在于，根据 SVG 标准，<text>元素不能位于<rect>元素内，但在我的一生中，我无法弄清楚如何让<text>元素出现在<rect>元素之外。有问题的代码在这里：

g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("y", function(d) { return y(d.Country);    })
    .attr("x", function(d) { return x(d.freqStart); })
    .attr("width", function(d) { return x(d.freqEnd) - x(d.freqStart); })
    .attr("height", y.bandwidth())
  .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .text(function(d) { return d.Operator; });

完整代码可以在https://plnkr.co/edit/JiuYKhRxgqtG1osYjJHq?p=preview找到

斯巴达93

是的，你是对的。<text>元素不能在<rect>元素内部。从技术上讲，您可以附加它们，但您将看不到任何内容。

话虽如此，执行此操作的常用方法是将您的矩形附加到<g>元素。这样，您可以相应地将文本标签添加到相应的组中。

这是我更改的代码部分。对于每个条，我们附加一个新<g>元素。在代码的第二部分，我们将文本标签添加到相同的 g 元素。

 g.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bars")
.append("rect")
  .attr("class", "bar")
  .attr("y", function(d) { return y(d.Country);    })
  .attr("x", function(d) { return x(d.freqStart); })
  .attr("width", function(d) { return x(d.freqEnd) - x(d.freqStart); })
  .attr("height", y.bandwidth());

var bars = svg.selectAll(".bars");
bars.append("text")
  .attr("class", "label")
  .attr('transform', 'rotate(-90)')
.attr("y", function(d) { return x(d.freqStart) + 20; })
.attr("x", function(d) { return -y(d.Country) + 5; })
  .text(function(d) { return d.Operator; });

完整的工作代码在这里 - https://plnkr.co/edit/9rUZXl7mfw32sWJih2Ob?p=preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。