Question

我正在努力为D3版本4图表中的单个条形添加垂直标签。我认为问题是<text>元素根据SVG标准不能在<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

Answer 1

是的，你是对的。 <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

标签不显示D3 v4条形图

1 个答案: