Question

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

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

如何获得输出？

Answer 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。

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

1 个答案: