d3.js中d3.csv(）的回调函数问题

Callback function issue with d3.csv() in d3.js

本文关键字：d3 回调 函数 问题 js csv      更新时间：2023-09-26

我在使用d3.js时遇到了一个问题：它不会在d3.csv中执行回调函数

date,ISE,SP,DAX,FTSE,NIKKEI,BOVESPA,EU,EM
5-Jan-09,0.038376187,-0.004679315,0.002193419,0.003894376,0,0.031190229,0.012698039,0.028524462
6-Jan-09,0.031812743,0.007786738,0.008455341,0.012865611,0.004162452,0.01891958,0.011340652,0.008772644
7-Jan-09,-0.026352966,-0.030469134,-0.017833062,-0.028734593,0.017292932,-0.035898576,-0.017072795,-0.020015412

这是代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 12px Arial;}
path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
</style>
<body>
<!-- set inputs for the query -->    
<div id="new_input">
    &nbsp &nbsp
    Stock: <input type="text" name="stock" id="stock" value="ISE" 
    style="width: 70px;">
    &nbsp &nbsp
    <input name="updateButton" 
    type="button" 
    value="Update" 
    onclick="updateData()" />
</div>
<!-- load the d3.js library -->    
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script>
// Set the dimensions of the graph
var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.ISE); });
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 + ")");
var stock = document.getElementById('stock').value;
d3.csv("./hw5/data_akbilgic.csv",function(d){
        return{
            time: d.date,
            ise: +d.ISE,
            sp: +d.SP,
            dax: +d.DAX,
            ftse: +d.FTSE,
            nikket: +d.NIKKEI,
            bovespa: +d.BOVESPA,
            eu: +d.EU,
            em: +d.EM
        };
    } ,function(error, data){
        console.log("bbbbbbbbbbbb");
        data.forEach(function(d){
            console.log(d.ise);
        });
});
</script>
</body>

浏览器控制台中没有错误或警报，我不知道哪里出了问题。请帮忙检查，提前谢谢结果如下：浏览器控制台

问题出在您使用的d3-js上。

您使用

http://mbostock.github.com/d3/d3.js

应该是

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.js

此处的工作代码

希望这能有所帮助！

相关文章：