带有两个数组的 d3.js 折线图

Question

This questions not unique I agree.这个问题不是唯一的，我同意。 It has been answered in this link: D3.js: draw simple line graph starting from data arrays .已在此链接中回答： D3.js：从数据数组开始绘制简单的折线图。 I am doing a very similar thing, but in D3.js v5.我正在做一个非常相似的事情，但是在 D3.js v5 中。 The aforementioned question only talks about v4.上述问题仅涉及 v4。 So I changed my code and this is how it looks like now.所以我改变了我的代码，这就是现在的样子。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='https://d3js.org/d3.v5.min.js'></script>
    <script src='scripts/scriptzz.js'></script>

  </head>
  <body>
    <div id='wrapper'>
      <svg id='map'><div class="tooltip"></div></svg>
      <svg id='linechart'></svg>
    </div>
  </body>
</html>

scriptzz.js

x_data = [1,2,3,4,5,6,7,8,9,10]
y_data = [1,4,9,16,25,36,49,64,81,100]
var lineInnerHeight = 100px; 
var lineInnerWidth = 100px;
 lineSvg = d3.select('#linechart');
 var x = d3.scaleLinear().domain([Math.min(x_data), Math.max(x_data)]).range([0, lineInnerWidth]);
  var y = d3.scaleLinear().domain([Math.min(y_data), Math.max(y_data)]).range([lineInnerHeight, 0]);

  var line = d3.line()
  .x(function(d, i) {
      return x(x_data[i])
  })
  .y(function(d, i) {
      return y(y_data[i])
  })

  let g = lineSvg.append('g')
  var xAxis = d3.axisBottom().scale(x);
  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (lineInnerHeight) + ")")
      .call(xAxis);
  
  var yAxis = d3.axisLeft().scale(y);
  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(-25,0)")
      .call(yAxis);

  g.selectAll('path')  
    .attr('d', line(x_data))

This still doesn't work for me.这仍然对我不起作用。 After an overnight session of frustration I'm here to see if some fresh pairs of eyes can look and point out my mistake.经过一夜的沮丧之后，我来这里看看是否有一些新的眼睛可以注视并指出我的错误。 The place where I think I went wrong is the appending the axes and line to the #linechart div tag.我认为我出错的地方是将轴和线附加到#linechart div 标签。 Please feel free to ask for more information if needed.如果需要，请随时询问更多信息。 Thanks in advance.提前致谢。

Answer 1

Problem is with use of Math.min and Math.max in min max calculation as it is expecting numbers as an argument but not an array of numbers.问题是在 min max 计算中使用Math.min和Math.max ，因为它期望数字作为参数而不是数字数组。

 let x_data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let y_data = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]; let minX = d3.min(x_data); let maxX = d3.max(x_data); let minY = d3.min(y_data); let maxY = d3.max(y_data); let lineInnerHeight = 100; let lineInnerWidth = 100; lineSvg = d3.select('#linechart'); var x = d3.scaleLinear().domain([minX, maxX]).range([0, lineInnerWidth]); var y = d3.scaleLinear().domain([minY, maxY]).range([lineInnerHeight, 0]); var line = d3.line() .x(function(d, i) { return x(x_data[i]); }) .y(function(d, i) { return y(y_data[i]); }); let g = lineSvg.append('g'); var xAxis = d3.axisBottom().scale(x); g.append("g") .attr("class", "axis") .attr("transform", "translate(35," + (lineInnerHeight) + ")") .call(xAxis); var yAxis = d3.axisLeft().scale(y); g.append("g") .attr("class", "axis") .attr("transform", "translate(35,0)") .call(yAxis); g.append('path') .attr('d', line(x_data)) .attr("transform", "translate(35,0)");

 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <link rel='stylesheet' href='css/styles.css'> <script src='https://d3js.org/d3.v5.min.js'></script> </head> <body> <div id='wrapper'> <svg id='map'><div class="tooltip"></div></svg> <svg id='linechart'></svg> </div> </body> </html>

带有两个数组的 d3.js 折线图

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-28 19:51:58

带有两个数组的 d3.js 折线图

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-28 19:51:58

解决方案1
1 已采纳 2020-09-28 19:51:58