Question

我使用csv文件创建了一个折线图，现在我尝试使用来自相同csv的新数据更新此图。但是，当我在firefox中打开文件时，我收到一个错误：ReferenceError：updateData未定义。

这是我的代码：

<!DOCTYPE html>
<html>
   <head>
       <script type="text/javascript" src="d3/d3.min.js"></script>
   </head>
   <body>
      <div id="option">
            <input name="updateButton" 
             type="button" 
            value="Update" 
            onclick="updateData()" />
      </div>
      <script type="text/javascript">

        // Set the dimensions of the canvas / graph
       var margin = {top: 30, right: 20, bottom: 30, left: 150},
       width = 1000 - margin.left - margin.right,
       height = 400 - margin.top - margin.bottom;

       // Set the ranges
       var x = d3.time.scale().range([0, width]);
       var y = d3.scale.linear().range([height, 0]);

      // Define the axes
      var xAxis = d3.svg.axis().scale(x)
          .tickFormat(d3.format(".0f"))
          .orient("bottom");

      var yAxis = d3.svg.axis().scale(y)
          .orient("left")
          .ticks(5);

      // Define the line
      var valueline = d3.svg.line()
          .x(function(d) { return x(d.Year); })
          .y(function(d) { return y(d.AttendancePerG); });

      // Adds the svg canvas
      var svg = d3.select("body")
         .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 + ")");           

      // Get the data
      d3.csv("piratesAttendance.csv", function(error, data) {
           data.forEach(function(d) {
                  d.Year = +d.Year;
                  d.AttendancePerG = +d.AttendancePerG;
      });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.Year; }));
    y.domain([0, d3.max(data, function(d) { return d.AttendancePerG; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data))
        .attr("stroke", "black")
        .attr("stroke-width",2)
        .attr("fill","none");

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

function updateData() {

    // Get the data again
    d3.tsv("pittsburghAttendance", function(error, data) {
        data.forEach(function(d) {
            d.Year = +d.Year;
            d.Attendance = +d.Attendance;
    });

    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.Year; }));
    y.domain([0, d3.max(data, function(d) { return d.Attendance; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("body").transition();

    // Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .attr("class", "line")
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);

        });
     }                                                          
     });

      </script>

      </body>
  </html>

Answer 1

您的函数updateData是在回调中定义的，因此它不会位于页面的“全局”范围内，因此您无法从HTML中调用它。

尝试简单地将其声明移至<script>标记的开头（或结尾）。

哦，您对d3.csv的使用似乎也不正确。

D3更新折线图

1 个答案: