从D3中的多级对象创建图表

Question

Folks-我收到了以下格式的数据，我正试图在D3中放入一个多折线图。我需要使用键作为我的x轴，使用值作为y；每年画一条线。我无法获取xScale和yScale值。有办法做到这一点吗？

{"year":"2017","values":
[{"key":"3","value":1},{"key":"4","value":19},{"key":"5","value":176},{"key":"6","value":524},{"key":"7","value":284},{"key":"8","value":31}]},
{"year":"2018","values":
[{"key":"3","value":4},{"key":"4","value":15},{"key":"5","value":152},{"key":"6","value":532},{"key":"7","value":367},{"key":"8","value":55}]},
{"year":"2019","values":
[{"key":"3","value":1},{"key":"4","value":10},{"key":"5","value":88},{"key":"6","value":497},{"key":"7","value":410},{"key":"8","value":72},{"key":"9","value":3}]},
{"year":"2020","values":
[{"key":"1","value":1},{"key":"2","value":1},{"key":"3","value":1},{"key":"7","value":398},{"key":"8","value":107},{"key":"9","value":4}]},
{"year":"2021","values":
[{"key":"6","value":28},{"key":"7","value":78},{"key":"8","value":52},{"key":"9","value":8}]}
]```
Thanks

Answer 1

基本上，我们必须遍历给定的数据并找到xDomain和yDomain。

// find the domain and the range, assuming the starting value for xscale and yscale 
is 0. Adjust accordingly
const xDomain = [0, 0];
const yDomain = [0, 0];
data.forEach((yearData) => {
yearData.values.forEach((valObj) => {
const key = valObj.key;
const value = valObj.value;
xDomain[1] = Math.max(xDomain[1], parseInt(key)); // find max x value
yDomain[1] = Math.max(yDomain[1], value); // find max y value
// here, you can also set the min values similarly
// xDomain[0] = Math.min(xDomain[0], parseInt(key));
// yDomain[0] = Math.min(yDomain[0], value);
});
});

工作示例：D3 V5多折线图