Question

我是d3.js的新手，正在创建一个带有两个条形图的简单水平条形图。我想在两个栏上放置文本标签。根据我的研究，下面的代码看起来正确，但是屏幕上没有显示文本。在开发控制台中，似乎未添加文本元素。

这是JavaScript代码：

var dataArray = [23, 13];

var svg = d3.select("svg.d3svg")
  .attr("height", "20%")
  .attr("width", "100%")
  .selectAll("rect")
  .data(dataArray)
  .enter().append("rect")
  .attr("height", "7")
  .attr("width", "250")
  .attr("y", function(d, i) {return (i * 40) + 50 })
  .attr("x", "0")
  .attr("class", "d3bar");

  svg.selectAll("text")
  .data(dataArray)
  .enter().append("text")
  .attr("class", "text-svg")
  .text(function(d) {return d})
  .attr("x", "0")
  .attr("y", function(d, i) {return (i * 40) + 50});

text-svg类仅包含：

.text-svg {
  fill: white;
  font-family: sans-serif;
}

此正确的代码将html页上的svg元素作为目标，因为这些条放置在我想要的位置，但是我无法显示该文本。

感谢您的帮助。

Answer 1

根据@ rioV8的评论，您需要进行重组，以使text和rect节点是g的子节点，如下所示：

var dataArray = [23, 13];

var svg = d3.select("svg")
  .attr("height", "20%")
  .attr("width", "100%")

var bar = svg.selectAll("g")
  .data(dataArray)
  .enter().append("g")

var rect = bar.append('rect')
  .attr("height", "7")
  .attr("width", "250")
  .attr("y", function(d, i) {
    return (i * 40) + 50
  })
  .attr("x", "0")
  .attr("class", "d3bar");

var text = bar.append('text')
  .attr("class", "text-svg")
  .text(function(d) {
    return d
  })
  .attr("x", "0")
  .attr("y", function(d, i) {
    return (i * 40) + 45
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>

这将为您提供有效的SVG结构，如下所示：

<svg height="20%" width="100%">
    <g>
        <rect height="7" width="250" y="50" x="0" class="d3bar"></rect>
        <text class="text-svg" x="0" y="50">23</text>
    </g>
    <g>
        <rect height="7" width="250" y="90" x="0" class="d3bar"></rect>
        <text class="text-svg" x="0" y="90">13</text>
    </g>
</svg>

看看the docs for SVG rect。它说：

允许的内容：以下任意数量的元素，按任意顺序排列：动画元素，描述性元素

现在看看the docs for SVG g。它说：

允许的内容：以下任意数量的元素，按任意顺序：动画元素，描述性元素，形状元素，结构性元素，渐变元素

从这些用法说明中，我们可以确切地得到@ rioV8评论的内容：text is not an allowed child tag of rect。

Codepen

D3.js：文本属性未正确附加？

1 个答案: