score:2

Accepted answer

You can make an update function. The update function does the following:

Here data is the selected dataset.

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

Now we will make the rectangle for new data:

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

Similarly for text.

Now on change of the text in select call the update like below:

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

})

Working code here.


Related Query

More Query from same tag