我无法获得以下代码的输出答案

【问题标题】：I am unable to get the output for the code below我无法获得以下代码的输出
【发布时间】：2014-03-25 21:10:01
【问题描述】：

我正在尝试从 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>

还有 scatterchart.js 的代码

         var data = []
        d3.csv("data.csv", function(csvData) {

         data = csvData.forEach(function(d) { return [ +d.first, +d.second ] });
          console.log(data);

           var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);


       var margin = {
        top: 20,
       right: 15,
       bottom: 60,
       left: 25
        }, width = 950 - margin.left - margin.right,
        height = 480 - margin.top - margin.bottom;

      var x = d3.scale.linear()
      .domain([0, d3.max(data, function (d) {
      return d[0];
        })])
       .range([0, width]);

       var y = d3.scale.linear()
      .domain([0, d3.max(data, function (d) {
    return d[1];
        })])
      //.range([height, 0]) //flip y
     .range([0, height]);

  var chart = d3.select('body')
   .append('svg:svg')
   .attr('width', width + margin.right + margin.left)
   .attr('height', height + margin.top + margin.bottom)
   .attr('class', 'chart');

  var main = chart.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .attr('width', width)
  .attr('height', height)
  .attr('class', 'main');

     // draw the x axis
    var xAxis = d3.svg.axis()
      .scale(x)
     //.orient('bottom')
     .orient('top'); // adjust ticks to new x axis position

      main.append('g')
     //.attr('transform', 'translate(0,' + height + ')')
     .attr('transform', 'translate(0,0)') // move x axis up
       .attr('class', 'main axis date')
     .call(xAxis);

       // draw the y axis
        var yAxis = d3.svg.axis()
       .scale(y)
       .orient('left');

       main.append('g')
      .attr('transform', 'translate(0,0)')
      .attr('class', 'main axis date')
      .call(yAxis);

      var g = main.append("svg:g");

       g.selectAll("scatter-dots")
      .data(data)
      .enter().append("svg:circle")
      .attr("cx", function (d, i) {
         return x(d[0]);
           }) 
         .attr("cy", function (d) {
      return y(d[1]);
       }) 
      .attr("r", 5)
      .style("fill", function (d) { return color(d[0]);}) ;

  // begin of drawing lines
         var line = d3.svg.line()
      .x(function(d){return x(d[0]);})
     .y(function(d){return y(d[1]);})
      .interpolate("linear");  

        g.append("path")
      .attr("d", function(d) { return line(data)})
       .attr("transform", "translate(0,0)")
        .style("stroke-width", 2)
      .style("stroke", "steelblue")
      .style("fill", "none");
     // end of drawing lines

        main.append("g")
      .attr("class", "grid")
       .attr("transform", "translate(0," + height + ")")
       .call(make_x_axis()
       .tickSize(-height, 0, 0)
       .tickFormat(""))

       main.append("g")
      .attr("class", "grid")
      .call(make_y_axis()
      .tickSize(-width, 0, 0)
       .tickFormat(""))

       function make_x_axis() {
       return d3.svg.axis()
       .scale(x)
      .orient("bottom")
     .ticks(30)
       }

      function make_y_axis() {
     return d3.svg.axis()
      .scale(y)
     .orient("left")
       .ticks(17)
     }
     });

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

我在控制台窗口中遇到的错误是 [未定义的 scatterchart.js:6] [TypeError: n is undefined d3.v3.min.js:3]

如何获得输出？

【问题讨论】：

您同时使用了两个 d3.js 文件。删除其中一个，然后重试。
删除了这些标签 ,
它显示什么错误？
[undefined scatterchart.js:6] [TypeError: n is undefined d3.v3.min.js:3]

标签： javascript html css svg d3.js

【解决方案1】：

问题出在 forEach 循环中。我不完全确定您是否以正确的方式使用它。试试这个：

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

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

如果您确实需要，您也可以将 d[0] 和 d[1] 更改为 d.first 和 d.second。我认为点表示法使事情更清晰，但有时您需要使用方括号表示法。

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

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

【讨论】：

TypeError: n is undefined d3.v3.min.js:3
当我实现它时工作得很好，在答案的编辑中检查到 bl.ock 的链接。您是否检查过 data/csvData 始终保持一致？
user1614080 - 但是为什么气泡（数据点）的颜色没有改变？我们在代码中有这一行 var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);
您没有为比例指定域，因此 d3 不知道如何处理您传递给它的值，除非它们与您的颜色矢量的索引匹配。我怀疑您想要做的是根据值对点进行着色。为此，请查看rangeBands。因为我有点懒，我刚刚将填充函数更新为return color(i)，以便颜色基于索引。我已经用这个更新了Bl.ock。
感谢 user1614080。我实际上正在寻找与您更新的 Bl.ock 相同的情节。但是，每当我更改 data.csv 中的数据值时，都会在 [0,0] 处出现一个默认数据点。如何避免这种情况？