Как не отображать пропущенные значения в многострочном графике с D3js - PullRequest
Новая
       13

Как не отображать пропущенные значения в многострочном графике с D3js

0 голосов
/ 11 октября 2018

Я пытаюсь построить две строки из файла tsv с помощью D3js.Одна серия завершена, вторая имеет значения только начиная с 2005 года. 

year    value1  value2
2000    8956355 
2001    8924704 
2002    8865723 
2003    8747717 
2004    8701521 
2004    8701521 
2005    8607147 11380809
2006    8551259 10672554
2007    8513818 10394369
2008    8462607 10297716
2009    8448535 9998783
2010    8411177 9988697
2011    8024205 9491908
2012    7920080 8725402
2013    7911208 8668111
2014    7807984 8274928
2015    7747598 8027083
2016    7575879 7779103

Мой код для двух строк следующий: 

var line1 = d3.line()
            .x(function(d) { return x1(d.year); })
            .y(function(d) { return y1(d.value1); });

var line2 = d3.line()
            .defined(function(d) { return d.value2 != undefined; })
            .x(function(d) { return x1(d.year); })
            .y(function(d) { return y1(d.value2); });

d3.tsv("js/plots/nitrogen-fertilisers.tsv"
, function(d) {
    d.value1 = +d.value1;
    d.value2 = +d.value2;
    return d;
}

fw1.append("path")
        .datum(data)
            .attr("class", "line")
            .attr("fill", "none")
            .attr("stroke", "#004494")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 1.5)
            .attr("d", line1);

fw1.append("path")
        .datum(data)
            .attr("class", "line")
            .attr("fill", "none")
            .attr("stroke", "#7FA1C9")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 1.5)
            .attr("d", line2);

Две строки отображаются, но,как показано на рисунке, вторая серия начинается не с 2005 года, а с начала серии с сегментом, который идет по оси X.

сюжет из двух линий

Я не знаю, как это сделать, чтобы пропустить все пропущенные нулевые (или неопределенные?) Значения до 2005 года. Если я заполняю пропущенные данные нулевым или NaN, я получаю следующую ошибку: "d3.v4.min.js:2 Ошибка: атрибут d: ожидаемое число, «M0, NaNL16,531L32,53…». Есть предложения?

1 Ответ

0 голосов
/ 11 октября 2018

в функции строки проверяет, установлено ли значение, если не установлено значение undefined 

d.value2 = (d.value2==="") ? null : +d.value2;
...