Javascript 我无法获得下面代码的输出_Javascript_Html_Css_Svg_D3.js

Javascript 我无法获得下面代码的输出

javascript html css svg d3.js

Javascript 我无法获得下面代码的输出,javascript,html,css,svg,d3.js,Javascript,Html,Css,Svg,D3.js,我正在尝试从data.csv文件获取图表的数据 <!DOCTYPE html> <html> <head> <title>D3 test</title> <style> .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } .chart { } .main te

我正在尝试从data.csv文件获取图表的数据

 <!DOCTYPE html>
 <html>
 <head>
 <title>D3 test</title>
      <style>

   .grid .tick {
   stroke: lightgrey;
    opacity: 0.7;
  }
  .grid path {
stroke-width: 0;
   }
.chart {
 }
.main text {
  font: 10px sans-serif;
  }
.axis line, .axis path {
 shape-rendering: crispEdges;
  stroke: black;
  fill: none;
  }
 circle {
 fill: steelblue;
   }



      </style>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js">   

                </script>
       <script src="http://d3js.org/d3.v3.min.js"></script>
      <script src="http://d3js.org/topojson.v1.min.js"></script>
      </head>
  <body>
  <div class='content'>
    <!-- /the chart goes here -->
       </div>

        <script type="text/javascript" src="scatterchart.js"></script>

      </body>
    </html>

而data.csv是

 first,second
  2,2
  3,3
  4,4
  5,4
  5.5,5
  6,6
  6,7
  6.5,8
  6.5,16
  17,16

我在控制台窗口中遇到的错误是 [未定义的散点图.js:6]

[TypeError:n未定义d3.v3.min.js:3]

如何获得输出？

问题在forEach循环中。我不完全确定你用的方法是否正确。试试这个：

csvData.forEach(function (d,i) {
    data[i] = {
      first: +d.first, 
      second: +d.second
    } 
});

这是在创建一个对象数组，而在代码中，您试图返回一个包含2个元素的数组

如果您愿意，您还可以将d[0]和d[1]更改为d.first和d.second，因为这确实是您的首选项。我认为点符号使事情更清楚，但有时你需要使用括号符号

此外，您还必须确保在任何地方都使用数据，而不是csvData，因为代码中存在混合数据

您可以找到一个工作示例。

您同时使用两个d3.js文件。删除其中一个并重试。删除这些标记，d3js.org/topojson.v1.min.js“>相同的结果显示的错误是什么？[undefined scatterchart.js:6][TypeError:n是undefined d3.v3.min.js:3]TypeError:n是未定义的d3.v3.min.js:3在我实现它时工作得很好，请在编辑答案时检查指向bl.ock的链接。您是否检查了数据/csvData在整个过程中是否一致？user1614080-但是为什么气泡（数据点）的颜色没有改变？我们在代码var color=d3.scale.ordinal（）范围（[“#b41f2d”#ff7f0e“]）；您没有为比例指定域，因此d3不知道如何处理您传递给它的值，除非它们与颜色向量的索引匹配。我怀疑您想做的是根据值为点着色。要做到这一点，请看一看。因为我有点懒，我刚刚将填充函数更新为

返回颜色（I）

因此颜色基于索引。我已经用此更新了。感谢用户1614080。我实际上是在寻找与更新的Bl.ock相同的绘图。但是每当我更改data.csv中的数据值时，都会在[0,0]处出现默认数据点。如何避免这种情况？

csvData.forEach(function (d,i) {
    data[i] = {
      first: +d.first, 
      second: +d.second
    } 
});