Question

我正在使用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>

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

Answer 1

问题在于你使用的d3 js。

您正在使用

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

应该是

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

工作代码here

希望这有帮助！

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

1 个答案: