d3折线图x，y不在同一级别的数据结构中，如何设置x，y函数？

问题描述

我看过很多例子，看起来要放入（x，y）的数据应该在同一级别，像这样

date,A,B,C
20-Jul-2019,10,20,16
21-Jul-2019,11,22,18
22-Jul-2019,13,19,21

但是，在我的情况下，我的数据结构有些不同，我的x来自第一级，而我的y来自第二级：

const data = [
        {
          name: "A",values: [{ source: "series_1",value: 10 }],},{
          name: "B",value: 22 }],]

所以它不能像这样工作：

    let line = d3
        .line()
        .x((d) => xScale(d.name))
        .y((d) => yScale(d.values.value))
        .curve(d3.curveBasis);
      let path = mainGraph
        .selectAll("path")
        .data(data)
        .enter()
        .append("g")
        .attr("class","path");
      path
        .append("path")
        .attr("class","line")
        .attr("d",(d) => line(d.values));

我尝试了几种方法，但无法解决，是否需要调整数据，所以d3绘制折线图的名称和值将处于同一水平？谢谢！

解决方法

您应该使用.y((d) => yScale(d.values[0].value))来达到内在价值。