D3.js 为什么我得到一个未捕获的引用错误标签没有定义？

我正在学习Scott Murray令人惊叹的“Web交互式数据可视化”（我的第二次尝试…我太沮丧了，以前放弃了）中的一个教程，并在一个交互式条形图教程中获得了额外的学分。点击触发器会从随机生成的数据中添加新的条……但标签不会更新。他留下了一个初始代码块来“创建”文本标签，留下了基于代码更新的挑战。所以我看了一下用于更新条的代码

var bars = svg.selectAll("rect")
    .data(dataset);                         

bars.enter()
    .append("rect")                         
    .attr("x", w)
    .attr("y", function(d) {
        return h - yScale(d);
    })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) {
        return yScale(d);
    })
    .attr("fill", function(d) {
        return "rgb(0, 0, " + Math.round(d * 10) + ")";
    })
    .merge(bars)
    .transition()
    .duration(500)
    .attr("x", function(d, i) {
        return xScale(i);
    })
    .attr("y", function(d) {
        return h - yScale(d);
    })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) {
    return yScale(d);
    });

…并使用用于创建初始标签的原始代码块对其进行插值

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return xScale(i) + xScale.bandwidth() / 2;
    })
    .attr("y", function(d) {
        return h - yScale(d) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");

考虑到这一点，这就是我想到的

var labels = svg.selectAll("text")
    .data(dataset);

labels.enter()      
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", w)
    .attr("y", function(d) {
        return h - yScale(d) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");
    })
    .merge(labels)
    .transition()
    .duration(500)
    .text(function(d) {
        return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return xScale(i) + xScale.bandwidth() / 2;
    })
    .attr("y", function(d) {
        return h - yScale(d) + 14;
    });

---

至少到了不会破坏条形码更新的程度…但它会卡在.merge（labels）行，出现未捕获的引用错误：标签未定义且标签不更新。如果我定义了一个名为“labels”的变量（与“bar”的定义方式完全相同），那么这不就是定义所需的全部吗？

我在github上找到了完整的示例，并对其进行了修改，并且对以下修改没有任何问题

      var labels = svg.selectAll("text")
         .data(dataset);
      labels.enter()
         .append("text")
         .text(function(d) { return d; })
         .attr("text-anchor", "middle")
         .attr("x", function(d, i) {
             return w + xScale.bandwidth() / 2;
         })
         .attr("y", function(d) {
             return h - yScale(d) + 14;
         })
         .attr("font-family", "sans-serif")
         .attr("font-size", "11px")
         .attr("fill", "white")
         .merge(labels)
         .transition()
         .duration(500)
         .text(function(d) {
             return d;
         })
         .attr("x", function(d, i) {
             return xScale(i) + xScale.bandwidth() / 2;
         })
         .attr("y", function(d) {
             return h - yScale(d) + 14;
         });

---

什么是

在
.attr（“填充”、“白色”）之后执行和下一行的
}
您能展示完整的示例代码吗？谢谢！现在它不再在.merge（labels）处中断，但我得到了一个未捕获的SyntaxError：在最后一个}处输入的意外结束；如此接近，但还不完全。你能链接到Github示例代码吗？@DavidOsterGraphics和我使用了d3，而不是存储库中的d3。啊……我使用的是d3.v4，因为这是本书专门用它编写的。这应该不是问题，因为v4和v5在这个图中具有相同的语法。代码现在是否适用于您。该错误表明您对刚刚使用d3.v4.min.js尝试的
{}
或
（）
进行了一些输入错误，其行为与预期一致。