重绘一个简单的图形答案

【问题标题】：Redrawing A Simple Graph重绘一个简单的图形
【发布时间】：2012-09-22 23:19:09
【问题描述】：

我有一个由下面的代码呈现的非常简单的折线图。我创建了一个简单的计时器来将项目推送到数据数组中，然后重绘图表。问题是图表没有被重绘。我可以看到 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);

【问题讨论】：

标签： javascript graph svg line d3.js

【解决方案1】：

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

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

或者您可以为其分配一个特定的类（“line”），然后使用更具体的选择器（“.line”）。这也将使样式更容易。

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

【讨论】：