我正在尝试制作非常类似于D3的创建者自己提供的from this example的折线图。
为了处理空值,他使用了define()函数,如下所示:
var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
然后,如果找到一个空值而不是一个对象,它将被忽略,并且在图表中将有一个空洞,如下所示:
在此示例中,数据的格式如下:
data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]
但是我在处理cas时比较棘手,因为它是一种格式如下的时间序列:
data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]
如您所见,空值位于多个对象内。结果,前面描述的define()函数也无法正常工作,我的图形行如下所示:
最后的值在数据集中被视为0,而不是“空白”。所以我的问题是:是否可以像Mike Mike Bostock的示例一样修改定义的函数以忽略空值?
这是我的折线图的完整代码:
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.line {
stroke-width: 2px;
fill:none;
}
.line:hover{
stroke:#c2c2c2;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 20, right: 165, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
data = [{"date":1980,"value":80},{"date":1981,"value":80},{"date":1982,"value":81},{"date":1983,"value":81},{"date":1984,"value":96},{"date":1985,"value":82},{"date":1986,"value":84},{"date":1987,"value":76},{"date":1988,"value":75},{"date":1989,"value":75},{"date":1990,"value":74},{"date":1991,"value":78},{"date":1992,"value":77},{"date":1993,"value":79},{"date":1994,"value":81},{"date":1995,"value":83},{"date":1996,"value":82},{"date":1997,"value":82},{"date":1998,"value":81},{"date":1999,"value":83},{"date":2000,"value":83},{"date":2001,"value":84},{"date":2002,"value":85},{"date":2003,"value":84},{"date":2004,"value":85},{"date":2005,"value":81},{"date":2006,"value":83},{"date":2007,"value":78},{"date":2008,"value":null},{"date":2009,"value":null},{"date":2010,"value":null},{"date":2011,"value":null},{"date":2012,"value":null},{"date":2013,"value":null},{"date":2014,"value":null},{"date":2015,"value":null}]
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, 100]);
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "#0F185B")
.attr("d", line);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("font-size", "0.9em")
.attr("width","40px")
.attr("transform", "rotate(-65)")
.text(function(d) {return +d; });
svg.append("g")
.call(d3.axisLeft(y));
</script>
</body>
提前致谢 !
最佳答案
将d.value
用作defined
方法:
var line = d3.line()
.defined(function(d) {
return d.value;
})
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.value);
});
这是您更新的代码:
var margin = {
top: 20,
right: 165,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var line = d3.line()
.defined(function(d) {
return d.value;
})
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.value);
});
data = [{
"date": 1980,
"value": 80
}, {
"date": 1981,
"value": 80
}, {
"date": 1982,
"value": 81
}, {
"date": 1983,
"value": 81
}, {
"date": 1984,
"value": 96
}, {
"date": 1985,
"value": 82
}, {
"date": 1986,
"value": 84
}, {
"date": 1987,
"value": 76
}, {
"date": 1988,
"value": 75
}, {
"date": 1989,
"value": 75
}, {
"date": 1990,
"value": 74
}, {
"date": 1991,
"value": 78
}, {
"date": 1992,
"value": 77
}, {
"date": 1993,
"value": 79
}, {
"date": 1994,
"value": 81
}, {
"date": 1995,
"value": 83
}, {
"date": 1996,
"value": 82
}, {
"date": 1997,
"value": 82
}, {
"date": 1998,
"value": 81
}, {
"date": 1999,
"value": 83
}, {
"date": 2000,
"value": 83
}, {
"date": 2001,
"value": 84
}, {
"date": 2002,
"value": 85
}, {
"date": 2003,
"value": 84
}, {
"date": 2004,
"value": 85
}, {
"date": 2005,
"value": 81
}, {
"date": 2006,
"value": 83
}, {
"date": 2007,
"value": 78
}, {
"date": 2008,
"value": null
}, {
"date": 2009,
"value": null
}, {
"date": 2010,
"value": null
}, {
"date": 2011,
"value": null
}, {
"date": 2012,
"value": null
}, {
"date": 2013,
"value": null
}, {
"date": 2014,
"value": null
}, {
"date": 2015,
"value": null
}]
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, 100]);
svg.append("path")
.data([data])
.attr("class", "line")
.style("stroke", "#0F185B")
.attr("d", line);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("font-size", "0.9em")
.attr("width", "40px")
.attr("transform", "rotate(-65)")
.text(function(d) {
return +d;
});
svg.append("g")
.call(d3.axisLeft(y));
path {
fill: none;
stroke: blue;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
关于javascript - D3:对象内部具有空值的非连续折线图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44747259/