javascript - 重绘简单图形

Question

我有一个非常简单的折线图，由下面的代码呈现。我创建了一个简单的计时器来将项目插入数据数组，然后重新绘制图形。问题是图表没有被重新绘制。我可以看到 line 函数按预期每 1.5 秒调用一次，但图形没有重绘。

我已经尝试了很多不同的事情，并尝试在 SO 上遵循与此类似的先前问题的一些答案，但我只是被卡住了。

    var data = getData();
    var graph;
    var line;

    function getData() {
        var arr = [];
        for (var x = 0; x < 30; x++) {
            arr.push(rand(100));
        }
        return arr;
    }

    function rand(max) {
       return Math.floor(Math.random() * (max + 1))
    }

    setInterval(function() {
        data.shift();
        data.push(rand(100));
        redraw();
    }, 1500);

    function redraw() {
        graph.select("svg path")
             .data([data])
             .attr("d", line);
    }

    var m = [80, 80, 80, 80]; // margins
    var w = 1000 - m[1] - m[3]; // width
    var h = 400 - m[0] - m[2]; // height

    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
    var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

    line = d3.svg.line()
             .x(function(d,i) { return x(i); })
             .y(function(d) { return y(d); })

    graph = d3.select("#graph").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] + ")");

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


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

    graph.append("svg:path")
         .data([data])         
         .attr("d", line);

Answer 1

问题是您的选择器“svg 路径”不够具体:它与您的轴绘制的域路径相匹配。您可以通过以下两种方式之一解决该问题。您可以在添加时保存对行路径的引用:

var path = graph.append("path")
    .datum(data)
    .attr("d", line);

或者您可以为它指定一个特定的类(“line”)，然后使用更具体的选择器(“.line”)。这也将使设计更容易。

graph.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);