d3-单击选择选项时更新条形图

Question

当我点击选择选项时，我已经写了一个d3条形图来显示特殊数据。但它不起作用，我不知道发生了什么 我可以获得正确的数据，但它不会显示。

这是我的项目代码http://paste.ubuntu.com/23572132/

以下是我项目的示例图表：http://paste.ubuntu.com/23571926/。

这是图片：

我修复了一些错误，但x和y轴没有更新 所有额外数据显示在第一个图表矩形中 关键代码paste.ubuntu.com/23581882 它显示为

Answer 1

您可以制作更新功能。更新功能执行以下操作：

此处数据是选定的数据集。

   //update  x and y axis domain
      xScale.rangeRoundBands([d3.min(data), width - padding.left - padding.right]);
      yScale.domain([d3.min(data), d3.max(data)]) //定义域
        //update the x and y axis
      d3.selectAll(".x").call(xAxis);
      d3.selectAll(".y").call(yAxis);

现在我们将为新数据制作矩形：

 //remove all the rectangles
  svg.selectAll(".MyRect").remove();
  //append rectangles with new data
  svg.selectAll(".MyRect")
    .data(data)
    .enter()
    .append("rect")
    .attr("fill", "#4285F4")
    .attr("class", "MyRect")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
    .attr("x", function(d, i) {
      return xScale(i) + rectPadding / 2;
    })
    .attr("width", xScale.rangeBand() - rectPadding)
    .attr("y", function(d) {
      var min = yScale.domain()[0];
      return yScale(min);
    })
    .attr("height", function(d) {
      return 0;
    })

同样适用于文字。

现在更改select中的文本调用如下所示的更新：

d3.select("#queryDays").on("change", function() {
  var v = d3.select(this)[0][0].value;
  if (v == 30) {
    update(dataset3)
  }
  if (v == 7) {
    update(dataset2)
  }
  if (v == 1) {
    update(dataset)
  }

})

工作代码here。