我正在尝试创建一个多折线图。我找到了 this问题似乎与我正在尝试做的类似,但该示例似乎并不完整,因为我无法运行它。下面是我可以创建的最小示例,用于演示我正在尝试做的事情,但是它不起作用。它应该创建一个包含两个系列的折线系列图表,一个用于开盘,一个用于收盘。我尝试使用与 HTML 表格示例 here 中相同的原则. 我正在使用 d3 版本 5。
const data = [
{ date: "Wed, 14 Aug 2019 00:00:00 GMT", close: 2.92, open: 3.2 },
{ date: "Wed, 28 Aug 2019 00:00:00 GMT", close: 2.89, open: 2.99 },
{ date: "Fri, 30 Aug 2019 00:00:00 GMT", close: 2.88, open: 3.4 },
{ date: "Mon, 02 Sep 2019 00:00:00 GMT", close: 2.89, open: 3.5 },
];
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// set the ranges
const x = d3
.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3
.scaleLinear()
.domain([0, 4])
.range([height, 0]);
const g = 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})`);
const seriesNames = ["open", "close"]
// create array where each element is a dataset for a specific series
const transformedData = seriesNames.map(colName => data.map(row => ({ date: row.date, value: row[colName] })));
const valueline = d3
.line()
.x(d => x(d.date))
.y(d => y(d.value));
let series = g
.selectAll("path")
.data(seriesNames)
.enter()
.append("path") // create path for each series
.data(colName => transformedData[colName]) // bind series-specific dataset to path
.attr("d", valueline) // create line from series-specific dataset
.attr("stroke", "red")
.attr("fill", "none");
// Add the X Axis
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
// Add the Y Axis
g.append("g").call(d3.axisLeft(y));
最佳答案
两件事:首先,将数据数组直接传递给 data
方法:
let series = g
.selectAll("path")
.data(transformedData)
//etc...
其次,你有一个时间尺度。因此,使用日期,而不是字符串:
data.forEach(d => d.date = new Date(d.date));
这是您的代码,其中包含这两项更改:
const data = [{
date: "Wed, 14 Aug 2019 00:00:00 GMT",
close: 2.92,
open: 3.2
},
{
date: "Wed, 28 Aug 2019 00:00:00 GMT",
close: 2.89,
open: 2.99
},
{
date: "Fri, 30 Aug 2019 00:00:00 GMT",
close: 2.88,
open: 3.4
},
{
date: "Mon, 02 Sep 2019 00:00:00 GMT",
close: 2.89,
open: 3.5
},
];
data.forEach(d => d.date = new Date(d.date));
const margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// set the ranges
const x = d3
.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3
.scaleLinear()
.domain([0, 4])
.range([height, 0]);
const g = 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})`);
const seriesNames = ["open", "close"]
// create array where each element is a dataset for a specific series
const transformedData = seriesNames.map(colName => data.map(row => ({
date: row.date,
value: row[colName]
})));
const valueline = d3
.line()
.x(d => x(d.date))
.y(d => y(d.value));
let series = g
.selectAll("path")
.data(transformedData)
.enter()
.append("path") // create path for each series
.attr("d", valueline) // create line from series-specific dataset
.attr("stroke", "red")
.attr("fill", "none");
// Add the X Axis
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
// Add the Y Axis
g.append("g").call(d3.axisLeft(y));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
关于javascript - 多系列折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58332665/