score:1

Accepted answer

you just have to redraw your axis and your circles on your onChange:

d3.select('#inds')
        .on("change", function () {
            var sect = document.getElementById("inds");
            var section = sect.options[sect.selectedIndex].value;
            x.domain([0, Math.floor(section)]);
            d3.select(".x.axis").call(xAxis);
            svg.selectAll("dot")
                .data(data)
                .attr("r", 5)
                .attr("cx", function (d) {
                    return x(d.date);
                })
                .attr("cy", function (d) {
                    return y(d.close);
                })
        });

new answer: you are not updating your graph you are redrawing it completely change you ron change to :

d3.select('#inds').on("change", function() {
  var sect = document.getElementById("inds");
  var section = sect.options[sect.selectedIndex].value;


  x.domain([0, Math.floor(section)]);

  d3.select(".x.axis").call(xAxis);


  svg.select(".line")
    .attr("d", valueline(data));

  // draw the scatterplot
  svg.selectAll("circle")
    .data(data)
    .attr("r", 5)
    .attr("cx", function(d) {
      return x(d.date);
    })
    .attr("cy", function(d) {
      return y(d.close);
    })


});

you can take a look here for the update patern https://bl.ocks.org/mbostock/3808218


Related Query

More Query from same tag