0

JSFiddle：http: //jsfiddle.net/3b8Ax/4/

我创建了随机数据，并在尝试学习时使用 d3 绘制了它。然而，当把标签贴在条上时，前 6 个从来没有得到标签，我疯了想找出原因。有人有意见吗？我还在学习，所以代码可能非常未经优化和混乱。谢谢！

文字绘制功能：

            svg.selectAll("text").data(dataset).enter().append("text")
                .text(function (d) {  return d; })
                .attr("x", function (d, i) { console.log(dataset);return i * ((w - SidebarPadding) / dataset.length) + SidebarPadding + (w / dataset.length - padding) / 2; })
                .attr("y", function (d) {
                    if (scale(d) > (h - 10)) { return h - 2; }
                    return scale(d) + 10;
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px")
                .attr("fill", "orange")
                .attr("text-anchor", "middle")
                .attr("font-size", "50%");
4

1 回答 1

0

您的问题与选择的工作方式有关。您正在执行一个svg.selectAll("text")，它选择 SVG 中的所有文本元素。然后，您使用 将数据与所选元素进行匹配.data()。关键是，默认情况下，D3 通过索引匹配数据和 DOM 元素（即第一个 DOM 元素与第一个数据项匹配，依此类推），并且您的 SVG 中已经存在文本元素（轴的标签）。因此，您的选择不为空，并且部分数据与这些元素（轴标签）匹配。

因此，.enter()选择不包含所有数据元素的 DOM 元素，而仅包含那些不匹配的元素。因此，您完全缺少元素的轴标签数。

解决此问题的方法之一是为您的标签分配一个类并相应地更改选择器（例如，在更新的 jsfiddle 中）。或者，您可以在添加轴之前简单地添加标签。

于 2013-08-13T12:44:38.460 回答