Я пытаюсь сделать линейную диаграмму, очень похожую на из этого примера, предоставленного самим создателем D3.
Чтобы иметь дело с нулевыми значениями, он использовал функциюdefined() следующим образом:
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}]
Как видите, нулевые значения находятся внутри нескольких объектов. Как следствие, описанная ранее функцияdefined() также не работает, и моя линия графика выглядит так:
Последние значения рассматриваются как 0, а не как «пробелы» в наборе данных. Итак, мой вопрос: могу ли я изменить определенную функцию, чтобы игнорировать нулевые значения, как пример Майка Бостока?
Вот весь код моего линейного графика:
<!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>
Заранее спасибо !
