Question

我正在研究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）行中，并带有 Uncaught ReferenceError：未定义标签，并且标签不会更新。如果我定义一个名为“ labels”的变量（与“ bars”完全一样），那不应该是定义所需的全部内容吗？

Answer 1

我在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;
         });

为什么我未定义Uncaught ReferenceError标签？

1 个答案: