Обновление линейного графика

Question

Я ищу лучший способ обновить линейный граф. Входящие данные не являются «новыми», это просто переключение между множеством разных наборов данных. Моя проблема в том, что .append («путь») просто не работает, и я не уверен, почему. Возможно, это связано с моей группировкой: мне нравится помещать поля вокруг моих графиков, поэтому оси и метки не обрезаются. Чтобы сделать это, мой HTML выглядит следующим образом ...

<svg w, h id='svg-container'> 
    <g translate(w - margin, h - margin) id='chart-container'> 
    <g id='x-axis'> 
    <g id='y-axis'> 

В моем коде я хотел бы, чтобы выбрать chart-container и присоединять <path d='...' id='line'>. Позже, обновляя график, я надеюсь, что сможет просто select('chart-container').select('path') и обновить этот выбор.

Начальная настройка графика:

var svgContainer = d3.select(element[0]).append('svg') 
    .attr({ 
     width: width + margin.left + margin.right, 
     height: height + margin.top + margin.bottom 
    }) 
    .classed('svg-container', true); 

var chartContainer = svgContainer.append('g') 
    .classed('chart-container', true) 
    .attr('transform', "translate(" + margin.left + "," + margin.top + ")"); 

chartContainer.append('path') 
.data(activeData) 
.attr('d', lineFunc) 
.attr('stroke', 'blue') 
.attr('stroke-width', 
.attr('fill', 'none'); 

Обновление диаграммы позже:

svgContainer = d3.select('#line-container').select('.svg-container') 
    .attr({ 
     width: width + margin.left + margin.right, 
     height: height + margin.top + margin.bottom 
    }); 

chartContainer = svgContainer.select('.chart-container') 
    .attr('transform', "translate(" + margin.left + "," + margin.top + ")"); 

chartContainer.select('path') 
    .data(activeData) 
    .attr('d', lineFunc) 
    .attr('stroke', 'blue') 
    .attr('stroke-width', 
    .attr('fill', 'none'); 

К сожалению, это не работает, и я не знаю, почему. Начальный chartContainer.append('path'), кажется, работает (иногда), и chartContainer.select('path') фактически не возвращает правильный элемент (в другое время). Может ли d3 пересекать мои группы осей и возвращать один из их путей? Неужели я ошибаюсь?

Answer 1

Вы не показываете нам свой полный код, но из вашего описания это звучит так, как будто вы можете выбрать неправильный путь. Один из способов - назначить специальный класс на нужный путь и соответственно выбрать соответствующий.

chartContainer.append("path") 
    .attr("class", "chart"); 

chartContainer.select("path.chart"); 

Другая проблема заключается в том, что вы не можете использовать .data(), чтобы обновить данные, связанные с элементом DOM, как вы используете его. Вместо этого используйте .datum().

chartContainer.select('path') 
    .datum(activeData);