Question

我创建了随机数据，并在尝试学习时使用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%");

Answer 1

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

因此，.enter()选择不包含所有数据元素的DOM元素，但仅适用于那些不匹配的元素。因此，您缺少正确的轴标签元素数。

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

带有标签的D3 Graph Drawing，不会出现前几个标签

1 个答案: