Question

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

我一直将其用作guide，但我不确定我的例子是怎么出错的。我确定我错过了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

您的代码无效，主要原因有两个：

问题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个修复程序将解决您当前的问题。

修正here

但是你在代码中遇到很多问题。

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

工作代码here

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

1 个答案: