Перерисовка простого графика

У меня есть довольно простой линейный график, который отображается с помощью кода ниже. Я создал простой таймер для добавления элементов в массив данных, а затем перерисовал график. Проблема в том, что график не перерисовывается. Я вижу, что функция линии вызывается каждые 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 svg d3.js graph line
person Jaimal Chohan    schedule 22.09.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что ваш селектор «svg path» недостаточно конкретен: он соответствует пути домена, нарисованному вашими осями. Вы можете исправить это одним из двух способов. Вы можете либо сохранить ссылку на путь строки при ее добавлении:

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

Или вы можете назначить ему определенный класс ("строка"), а затем использовать более конкретный селектор ("".строка"). Это также облегчит стиль.

graph.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);
person mbostock    schedule 23.09.2012