无法在D3.js中动态更新图形和坐标轴

Question

I am making a line chart using D3.js and my target is to dynamically update the graph(line path) as well as both the axes. With the given code I am able to update the axis dyamically and update the line-path, but the issue is that previous line-path still shows on the chart.

How to remove the previous line-path?

/*******************************   CHART PLOTTING FOR TWITTER SENTIMENT ************************/

/* implementation heavily influenced by http://bl.ocks.org/1166403 */

    window.setInterval(refreshGraph, 3000);

    // while (true){
    //   plot();
    //   delay(5000);
    // }
    var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];

    // function plot(){
    // d3.json("/bigdata/v1/analytics/sentiment", function(d){
    // define dimensions of graph
    var m = [80, 80, 80, 80]; // margins
    var w = 1000 - m[1] - m[3]; // width
    var h = 400 - m[0] - m[2]; // height

    // create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)

     // data = data.concat(d.values);
    // X scale will fit all values from data[] within pixels 0-w
    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
    // Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
    var y = d3.scale.linear().domain(d3.extent(data)).range([h, 0]);
        // automatically determining max range can work something like this
        // var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

    // create a line function that can convert data[] into x and y points
    var line = d3.svg.line().interpolate("monotone")
        // assign the X function to plot our line as we wish
        .x(function(d,i) { 
            // verbose logging to show what's actually being done
            console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
            // return the X coordinate where we want to plot this datapoint
            return x(i); 
        })
        .y(function(d) { 
            // verbose logging to show what's actually being done
            console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
            // return the Y coordinate where we want to plot this datapoint
            return y(d); 
        })

        // Add an SVG element with the desired dimensions and margin.
        //debugger;
        var graph = d3.select("#igraph").append("svg:svg")
              .attr("width", w + m[1] + m[3])
              .attr("height", h + m[0] + m[2])
            .append("svg:g")
              .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

        // create yAxis
        var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
        // Add the x-axis.
        graph.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + h + ")")
              .call(xAxis);


        // create left yAxis
        var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
        // Add the y-axis to the left
        graph.append("svg:g")
              .attr("class", "y axis")
              .attr("transform", "translate(-25,0)")
              .call(yAxisLeft);

        // Add the line by appending an svg:path element with the data line we created above
        // do this AFTER the axes above so that the line is above the tick-lines
        graph.append("svg:path").attr("d", line(data));

      // });

 // to refresh the graph after interval of 3ms
function refreshGraph () {
  //debugger;
   d3.json("/bigdata/v1/analytics/sentiment", function(d){

  data = data.concat(d.values);
  /* var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
  var y = d3.scale.linear().domain(d3.extent(data)).range([h, 0]);

//line.exit().remove
graph.selectAll(".xAxis")
    .transition()
    .duration(10)
    .call(xAxis);


graph.selectAll("line").data(data).enter()
 .append("svg:path")
 .attr("d", line(data))
 });
 */
  x.domain([0, data.length]);

 var t = graph.transition().duration(750);
 t.select(".x.axis").call(xAxis);

 graph.select("path.line").remove();

graph.selectAll("line").data(data).enter()
 .append("svg:path")
 .attr("d", line(data));


});
}
/*******************************   CHART PLOTTING FOR TWITTER SENTIMENT       ************************/

Answer 1

First, graph.select("path.line").remove() isn't removing anything, because there are no paths classed "line" in your view, since you're not assigning that class to the svg:path you're creating. So, when you .append("svg:path") , you also need to run .classed('line', true) .

Next, where you have graph.selectAll("line").data(data).enter() , you need to prefix "line" with a . , to make it select anything classed line .

Finally — and this might not be a mistake, depending on how your API works — where you have data = data.concat(d.values) you're appending new data to the existing data, rather than replacing it. So if the API is returning the entire line data, then appending it to the existing data is inappropriate here.