d3js绘制未定义的线图是不可迭代的

问题描述

我正在学习d3js，在创建折线图时需要帮助。我相当成功地绘制了简单的对象和条形图。折线图似乎是要爬的陡峭山丘。

const data = [{
    "LINE1": [
      10,11,12,15
    ]
  },{
    "LINE2": [
      21,22,23,32
    ]
  },{
    "LINE3": [
      11,13,15
    ]
  }
]

// set the dimensions and margins of the graph
var margin = {
    top: 50,right: 100,bottom: 130,left: 120
  },width = 900 - margin.left - margin.right,height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#ca")
  .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})`);

// Add X axis
var x = d3.scaleLinear()
  .domain(d3.extent(data,(d) => d.length))
  .range([0,width]);

svg.append("g")
  .attr("transform","translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(5));

// Add Y axis
// I need help in this area,how can I get the min and max values set in the domain?
var y = d3.scaleLinear()
  .domain([0,d3.max(data,(d) => d.values)])
  .range([height,0]);

svg.append("g")
  .call(d3.axisLeft(y));

// Draw the line
// I need help in this area,how can I get the lines plotted,js gives error in this!
svg.selectAll(".line")
  .data(data)
  .enter()
  .append("path")
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width",1.5)
  .attr("d",(d) => {
    console.log(d)
    var k = d3.line()
      .x((d) => x(d))
      .y((d) => y(d))
      (d.values);
    console.log(k);
    return k;
  });

<div id="ca">
</div>
<script src="https://d3js.org/d3.v6.min.js"></script>

如何获取具有现有数据格式的折线图？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）