title: d3 update circles on line when button clicked
body: <p>I have a chart which should update the data appearance in the chart when a button is clicked.</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/264zvtg1/" rel="nofollow noreferrer">http://jsfiddle.net/264zvtg1/</a></p>
  
  <p>Somehow the button click won't work in the fiddle but in my sourcecode it works.</p>
  
  <p>Here are the images of the charts. </p>
  
  <p>Before button click:<img src="https://i.stack.imgur.com/XWDKB.png" alt="enter image description here"></p>
  
  <p>After button click:
  <img src="https://i.stack.imgur.com/XBQR9.png" alt="enter image description here"></p>
  
  <p>So the line gets updated and the axis too. But how can the dots on the line move to their new positions and disappear?</p>
  
  <p>Here is how thought the update method should work for the dots:</p>
  
  <pre><code> function weekData() {
  
       var arr = getDataArr(weekString);
       // Get the data again
       var data = arr.map(function(d) {
           return {
                date: parseDate(d[0]),
                ideal: d[3],
                open: d[1]
           };
       });
  
         // Scale the range of the data
        x.domain(d3.extent(data, function(d) {
            return d.date;
        }));
        y.domain([0, d3.max(data, function(d) {
            return Math.max(d.open);
        })]);
  
        xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(arr.length - 1)
            .tickFormat(d3.time.format("%Y-%m-%d"));
  
       // Select the section we want to apply our changes to
       var svg = d3.select("#area").transition();
  
       // Make the changes
      svg.select(".openLine")   // change the line
          .duration(750)
          .attr("d", openLine(data))
      svg.select(".dot")
          .duration(750)
          .attr("r", 3.5)
          .style("fill", function(d) {
              if (d.open &lt;= d.ideal) {
                  return "#579FAD"
              } else {
                  return "#AD6557"
              };
          })
          .attr("cx", function(d){
              return x(d.date);
          })
          .attr("cy", function(d){
              return y(d.open);
          })
      svg.select(".x.axis") // change the x axis
          .duration(750)
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("transform", function(d) {
              return "rotate(-65)"
      });
      svg.select(".y.axis") // change the y axis
          .duration(750)
          .call(yAxis)
   }
  </code></pre>
  
  <h2><strong>Edit</strong></h2>
  
  <p>Here is a fiddle of my working solution: <a href="http://jsfiddle.net/jn2mj9wo/1/" rel="nofollow noreferrer">http://jsfiddle.net/jn2mj9wo/1/</a></p>