使用 D3 在 JSON 中嵌套数组

Question

我是 d3js 的新手，正在尝试从嵌套在 JSON 中的数组中绘制一条线。已经提出了关于该主题的几个问题，但他们的解决方案不适用于我的具体问题（也许只是我是一个完全的新手）。

有问题的 JSON 文件 (json_data.json) 是这样的：

{"Test": 1, 
 "Name": "SampleA", 
 "Voltage": [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], 
 "Current": [-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5]}

“电压”和“电流”是我想用这个 js 绘制的 x 和 y 值：

var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 800 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var xScale = d3.scaleLinear().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);

var line = d3.line()
    .x(function(d,i){return d.Voltage[i]; } )
    .y(function(d,i){return d.Current[i]; } );

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 + ")");

d3.json("json_data.json", function(data) {

xScale.domain(d3.extent(data.Voltage));
yScale.domain(d3.extent(data.Current));

svg.append("path")     
    .attr("d", line(data))

svg.append("g")       
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")        
    .attr("class", "y axis")
    .call(yAxis);

});

问题是由于某种原因折线图没有显示。轴以正确的比例显示，这让我认为 line() 生成器一定有问题。当我运行 console.log 时会显示 JSON 和嵌套数组。

非常感谢您的帮助！如果您对如何改进我的代码或 JSON 结构有任何建议，我正在倾听 :) 非常感谢！

Answer 1

d3.line "为给定的数据数组生成一行" (https://github.com/d3/d3-shape#_line)。

所以我会创建一个点数组，例如：

let lineData = []
let lineDataLength = data.Voltage.length;

for (var i = 0; i < lineDataLength; i++) {
      let point = {};
      point.x = data.Voltage[i];
      point.y = data.Current[i];
      lineData.push(point);
};

那么对于线生成器简化为：

var line = d3.line()
    .x(function(d,i){return xScale(d.x); } )
    .y(function(d,i){return yScale(d.y); } );