D3.js 标签不会与D3 v4条形图一起显示

D3.js 标签不会与D3 v4条形图一起显示,d3.js,charts,label,D3.js,Charts,Label,我正在努力为D3版本4图表中的各个条形图添加垂直标签。我认为问题在于,根据SVG标准,元素不能在元素中,但就我而言,我无法确定如何让元素正好出现在元素之外。问题代码如下: g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("y", function(d) { return y(d.Country); }) .attr("x", functio

我正在努力为D3版本4图表中的各个条形图添加垂直标签。我认为问题在于,根据SVG标准,
元素不能在
元素中,但就我而言,我无法确定如何让
元素正好出现在
元素之外。问题代码如下:

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; });
完整代码可在

是的,你是对的<代码>元素不能在
元素内。从技术上讲,您可以附加它们,但不会看到任何内容

也就是说,通常的方法是将rect附加到
元素。这样,您可以相应地将文本标签添加到相应的组中

这是我更改的代码部分。对于每个条,我们附加一个新的
元素。在代码的第二部分中,我们将文本标签添加到相同的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; });

这里有完整的工作代码-

非常有效。非常感谢!特别感谢您对解决方案的清晰解释!