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

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

javascript csv d3.js

Javascript d3.js中d3.csv（）的回调函数问题,javascript,csv,d3.js,Javascript,Csv,D3.js,我在使用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

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


正文{font:12px Arial；}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
 
股票：
 
//设置图形的尺寸
var margin={顶部：30，右侧：40，底部：30，左侧：50}，
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
var valueline=d3.svg.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.ISE）；}）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var stock=document.getElementById（'stock'）。值；
d3.csv（“./hw5/data_akbilgic.csv”），函数（d）{
返回{
时间：d.date，
ise:+d.ise，
sp:+d.sp，
dax:+d.dax，
富时：+d.ftse，
日经：，
波维斯帕：+d.波维斯帕，
欧盟：+d.eu，
em:+d.em
};
}，函数（错误，数据）{
控制台日志（“bbbbbbbbbb”）；
data.forEach（函数（d）{
控制台日志（d.ise）；
});
});

浏览器控制台中没有错误或警报，我也不知道哪里出错了。请帮忙查收，提前谢谢

结果如下：

问题在于您使用的D3JS

你用

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

应该是的

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

工作代码

希望这有帮助

那么，您是否检查了数据是否已定义以及回调中的错误值是多少？请检查开发人员工具中的“网络”选项卡，并确认路径

/hw5/data\u akbilgic.csv

是否正确。它确实有效，您能告诉我原因吗？因为我用的是官方的，根本不起作用