尝试在 d3.js 中更新条形图

Question

我正在尝试根据月份在条形图中更新和转换数据。

我一直在使用它作为指南，但我不确定我的例子是如何出错的。我确定我错过了 d3.js 的一些关键基础知识，但我不确定在哪里。希望有人能为我指出来？这是一个 plnk 和一些代码;

http://plnkr.co/edit/l0jQgzf2LHOatc1t8S5M?p=preview

function draw() {
        updateData();

        x.domain(group.map(function(d) {
            return d.label;
        }));
        y.domain([0, 100]);
        // add axis

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", "-.55em")
            .attr("transform", "rotate(-90)");

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 5)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Value");
        // Add bar chart
        var bar = svg.selectAll("compareBar")
            .data(group);
        bar
            .enter().append("rect")
            .attr('x', function(d) {
                return x(d.label);
            })
            .attr('y', function(d) {
                return y(d.value);
            })
            .attr('width', x.rangeBand())
            .attr('height', function(d) {
                return height - y(d.value);
            });

        bar.exit().remove();
        bar
            .transition()
            .duration(750)
            .attr("y", function(d) {
                return y(d.value);
            })
            .attr("height", function(d) {
                return height - y(d.value);
            });
        svg.select(".y.axis").remove(); // << this line added
        // Existing code to draw y-axis:
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("value");
    }
    $("ul#months li a").click(function() {
        $("#selectMonth").text($(this).text());
        draw();
    })

    draw();
});

希望我不是一百万英里之外。

提前感谢任何帮助/建议！

Answer 1

您的代码无法正常工作主要是因为 2 个原因：

问题1：

您正在这样做：

    var bar = svg.selectAll("compareBar")//what is compareBar?
        .data(group);

它应该是：

var bar = svg.selectAll("rect")//select all rectangle DOMs
  .data(group);

问题2：

您正在将这样的数据设置为矩形栏：

    var bar = svg.selectAll("compareBar")//what is compareBar?
        .data(group);

它应该是：

    var bar = svg.selectAll("rect")
        .data(group, function(d){return d.value+d.label;});

使用矩形条唯一标识数据。

这2个修复程序将解决您当前的问题。

固定在这里

但是代码中有很多问题。

1）您一次又一次地绘制y轴x轴。

2）你想要过渡，这是行不通的。

要修复所有这些问题，请在标志打开时传递一个用于创建的标志，请像这样附加：

if (create) {
  bar
    .enter().append("rect")
    .attr('x', function(d) {
      return x(d.label);
    })
    .attr('y', function(d) {
      return y(d.value);
    })
    .attr('width', x.rangeBand())
    .attr('height', function(d) {
      return height - y(d.value);
    });
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.55em")
    .attr("transform", "rotate(-90)");

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 5)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Value");
}

在这种情况下，您可以避免一次又一次地制作 x 和 y 轴 + 条形。

转换将适用于所有情况（更新 + 创建）：

bar
  .transition()
  .duration(750)
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  });

工作代码在这里