如何使用 D3js 在多线图中不显示缺失值

米凯拉·赞尼

我正在尝试使用 D3js 从 tsv 文件中绘制两行。一个系列已完成,第二个系列的值仅从 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 年之前跳过所有缺失的 null(或不确定?)值。如果我用 null 或 NaN 填充缺失的数据,我会得到以下错误:“d3.v4.min.js:2 Error :属性 d:预期数字,“M0,NaNL16,531L32,53...”。有什么建议吗?

rioV8

在行函数中检查值是否已设置,如果未将其设置为未定义

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用D3js将图例添加到饼图中?以及如何集中饼图?

来自分类Dev

如何摆脱d3js中的重叠折线图

来自分类Dev

使用 d3js 可点击气泡图中的四重层次结构

来自分类Dev

D3js SVG的空行显示填充伪像,如何解决?

来自分类Dev

如何在 D3js 中为不同的图表显示不同的标题?

来自分类Dev

如何使用d3js的数据方法解析对象数组并将其显示在工具提示中?

来自分类Dev

如何更改d3JS强制有向图中所有突出显示的节点的颜色?

来自分类Dev

如何在D3js强制有向图中为节点实现突出显示和过渡效果?

来自分类Dev

使用d3js排序

来自分类Dev

使用d3js排序

来自分类Dev

D3js链接未显示

来自分类Dev

如何使用d3js实现联合绘图

来自分类Dev

如何使用d3js获取svg元素的宽度?

来自分类Dev

如何使用d3js间隔定义刻度

来自分类Dev

如何使用d3js间隔定义刻度

来自分类Dev

如何使用d3js拖动完整的svg?

来自分类Dev

如何使用d3js实现关节图

来自分类Dev

D3JS树状图呈现但颜色不显示

来自分类Dev

工具提示d3js区域图中的roi值

来自分类Dev

d3js / AngularJS-在angular指令中使用d3js

来自分类Dev

D3js:在堆叠数据集之前,如何以不规则的时间间隔对数据集进行插值?

来自分类Dev

如何在d3js中正确使用字符串值作为轴刻度?无法正确映射数据无法找出此代码中的错误

来自分类Dev

在多折线图中,在每条线的末端,我想要一个小圆圈,并使用d3.js作为终点的值

来自分类Dev

D3js折线图mouseOver

来自分类Dev

D3JS折线图在折线之间的过渡

来自分类Dev

d3js(+ crossfilter / dc)箱线图性能

来自分类Dev

D3JS折线图倒排问题

来自分类Dev

D3js折线图配置

来自分类Dev

d3js和弦图中的和弦衰减

Related 相关文章

热门标签

归档