使用嵌套JSON中的标签绘制D3.js多行图

我有以下几点 data JSON结构。

var data = {
  "Accel": {
    "10%": {
      "x": [0,1,2,3,4,5,6,...],
      "y": [0.3769,0.4052,0.4354,0.4675,...]
    },
    "20%": {
      "x": [0,1,2,3,4,5,6,...],
      "y": [0.7543,0.3756,0.7556,0.2344...]
    },
    ...
    "100%": {
      "x": [0,1,2,3,4,5,6,...],
      "y": [0.7543,0.3756,0.7556,0.2344...]
    }
  }
}

我想画出来 10条曲线/折线 与D3.js在同一轴上 使用字母数字中间键(XX%) 在图表上标记每条曲线。 到目前为止我最好的尝试:

// Margin, scales and axes
var margin = {top: 20, right: 50, bottom: 50, left: 20}, width = 1200, height = 800;
var xScale = d3.scaleLinear().domain([0,60]).range([0, width - margin.left - margin.right]).nice();
var yScale = d3.scaleLinear().domain([0,30]).range([height - margin.top - margin.bottom, 0]).nice();
var xAxis = d3.axisBottom(xScale).ticks(10, "s");
var yAxis = d3.axisRight(yScale).ticks(10, ".3");

// SVG
var svg = d3.select(".graph").append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr('viewBox','0 0 ' + width + ' ' + height);

// X axis
svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
    .call(xAxis);

// Y axis
svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + (width - margin.right) + "," + margin.top + ")")
    .call(yAxis);

// Line definition
var TbhLine = d3.line()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y));

// Lines plotting
var TbhPaths = svg.append("g")
    .selectAll("path")
    .data(data["Accel"])
    .enter()
    .append('path')
    .attr("fill", "none")
    .attr("stroke-width", 1.5)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("d", d => TbhLine(d));

当我运行它时,轴、比例、域和范围都很好,但没有绘制线。 关于如何做到这一点,有什么想法吗?我使用的是D3 v6。

提前感谢。