D3折线/面积图是否可以处理无序数据? [英] Can a D3 line/area chart work on unordered data?
问题描述
请参考以下链接: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
在这里数据是有序的(按顺序排列),如jan 2000,feb 2000等,但我想使此d3图在无序数据(如jan 2001,feb 2000等)上起作用.有可能吗?
Here the data is ordered (in sequence) like jan 2000, feb 2000 etc but i want to make this d3 graph work on unordered data like jan 2001 ,feb 2000 etc. Is it possible ?
推荐答案
简短回答:否.
行生成器或区域生成器(即块中的那个)将根据输入数据的顺序生成一条线(或一个区域).该API明确指出了这一点:
The line generator or the area generator (which is the one in that blocks) will generate a line (or an area) based on the input data in its order. The API makes it clear:
d3.line()
:为给定的数据数组生成一行.根据此线生成器的相关曲线,在将给定的输入数据传递给线生成器之前,可能需要按x值进行排序. (强调我的)
d3.line()
: Generates a line for the given array of data. Depending on this line generator’s associated curve, the given input data may need to be sorted by x-value before being passed to the line generator. (emphasis mine)
让我们在一个基本示例中看到这一点.我有一组值和年份,其中的年份未排序:
Let's see this in a basic example. I have an array of values and years, in which the years are not sorted:
var data = [{
year: 2010,
value: 100
}, {
year: 2017,
value: 70
}, {
year: 2012,
value: 50
}, {
year: 2016,
value: 10
}, {
year: 2013,
value: 90
}, {
year: 2014,
value: 20
}, {
year: 2011,
value: 50
}, {
year: 2015,
value: 40
}];
如果我将数据按现在的方式传递给线生成器,则这是折线图:
This is the line chart we have if I pass the data to the line generator the way it is right now:
var svg = d3.select("svg");
var data = [{
year: 2010,
value: 100
}, {
year: 2017,
value: 70
}, {
year: 2012,
value: 50
}, {
year: 2016,
value: 10
}, {
year: 2013,
value: 90
}, {
year: 2014,
value: 20
}, {
year: 2011,
value: 50
}, {
year: 2015,
value: 40
}];
var parseTime = d3.timeParse("%Y");
data.forEach(function(d) {
d.year = parseTime(d.year)
});
var xScale = d3.scaleTime()
.domain(d3.extent(data, function(d) {
return d.year
}))
.range([0, 300]);
var yScale = d3.scaleLinear()
.domain(d3.extent(data, function(d) {
return d.value
}))
.range([150, 0]);
var lineGenerator = d3.line()
.x(function(d) {
return xScale(d.year)
})
.y(function(d) {
return yScale(d.value)
})
.curve(d3.curveMonotoneX)
svg.append("path")
.style("fill", "none")
.style("stroke", "teal")
.style("stroke-width", "2px")
.attr("d", lineGenerator(data));
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
现在使用相同的代码,但是对数据进行排序:
Now the same code, but sorting the data:
data.sort(function(a, b) {
return d3.ascending(a.year, b.year)
});
这是结果:
var svg = d3.select("svg");
var data = [{
year: 2010,
value: 100
}, {
year: 2017,
value: 70
}, {
year: 2012,
value: 50
}, {
year: 2011,
value: 10
}, {
year: 2013,
value: 90
}, {
year: 2014,
value: 20
}, {
year: 2016,
value: 50
}, {
year: 2015,
value: 40
}];
var parseTime = d3.timeParse("%Y");
data.forEach(function(d) {
d.year = parseTime(d.year)
});
data.sort(function(a, b) {
return d3.ascending(a.year, b.year)
})
var xScale = d3.scaleTime()
.domain(d3.extent(data, function(d) {
return d.year
}))
.range([0, 300]);
var yScale = d3.scaleLinear()
.domain(d3.extent(data, function(d) {
return d.value
}))
.range([150, 0]);
var lineGenerator = d3.line()
.x(function(d) {
return xScale(d.year)
})
.y(function(d) {
return yScale(d.value)
})
.curve(d3.curveMonotoneX)
svg.append("path")
.style("fill", "none")
.style("stroke", "teal")
.style("stroke-width", "2px")
.attr("d", lineGenerator(data));
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
这篇关于D3折线/面积图是否可以处理无序数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!