d3js - 类型错误：字符串未定义

Posted 2023-02-22

【中文标题】d3js - 类型错误：字符串未定义

【英文标题】：d3js - TypeError: string is undefined

【发布时间】：2013-04-07 15:44:36

【问题描述】：

我不明白这个错误：

TypeError：字符串未定义 函数 d3_time_parse(日期，模板，字符串，j) var c, p, i = 0, n = template.length, m = string.length; ...

这是我的代码：

var margin = 上：20，右：80，下：30，左：50， 宽度 = 960 - margin.left - margin.right, 高度 = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y%m%d").parse; var x = d3.time.scale() .range([0, 宽度]); var y = d3.scale.linear() .range([高度, 0]); var color = d3.scale.category10(); var xAxis = d3.svg.axis() .scale(x) .orient("底部"); var yAxis = d3.svg.axis() .scale(y) .orient("左"); var line = d3.svg.line() .interpolate("基础") .x(函数(d) 返回 x(d.date); ) .y(function(d) return y(d.index); ); var svg = d3.select("body").append("svg") .attr("宽度", width + margin.left + margin.right) .attr("高度", 高度 + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("data.csv", function(error, data) color.domain(d3.keys(data[0]).filter(function(key) return key !== "date"; )); data.forEach（函数（d） d.date = parseDate(d.date); ); var 索引 = color.domain().map(function(name) 返回 姓名：姓名， 值：data.map（函数（d） 返回日期：d.date，索引：+d[name]； ) ; ); x.domain(d3.extent(data, function(d) return d.date; )); y.domain([ d3.min(indexes, function(c) return d3.min(c.values, function(v) return v.index; ); ), d3.max(indexes, function(c) return d3.max(c.values, function(v) return v.index; ); ) ]); svg.append("g") .attr("类", "x 轴") .attr("变换", "翻译(0," + 高度 + ")") .call(xAxis); svg.append("g") .attr("类", "y 轴") .call(yAxis) .append("文本") .attr("变换", "旋转(-90)") .attr("y", 6) .attr("dy", ".71em") .style("文本锚", "结束") .text("变化 (%)"); var index = svg.selectAll(".index") .data（索引） .enter().append("g") .attr("类", "索引"); index.append("路径") .attr("类", "行") .attr("d", function(d) return line(d.values); ) .style("stroke", function(d) return color(d.name); ); index.append("文本") .datum(function(d) return name: d.name, value: d.values[d.values.length - 1]; ) .attr("transform", function(d) return "translate(" + x(d.value.date) + "," + y(d.value.index) + ")"; ) .attr("x", 3) .attr("dy", ".35em") .text(function(d) return d.name; ); );

我的 csv 文件如下所示：

日期,DAX,CAC40,FTSE,NASDAQ,其他 20060407,-0.000712859,-0.009013212,0.010819606,0.009846526,0.003082604 20060413,-0.007765968,-0.024263398,0.011238971,0.004128621,0.005952774 20060421,0.02261859,0.00330204,0.028734861,0.001688981,0.003459211 20060428,0.007170521,-0.007531405,0.010534438,-0.002416181,0.004012361 ...

有人可以帮我吗？ 谢谢 斯库特

【问题讨论】：

使用您的代码的工作示例创建jsfiddle.net？

你为什么不在d3.csv回调中检查error？

【参考方案1】：

日期、DAX、CAC40、FTSE、纳斯达克、其他

javascript 变量名区分大小写，因此在解析带有上述标题的 CSV 文件时，您需要引用以下字段：

d.Date // note the uppercase D
d.DAX // note all uppercase

这是来自 d3 wiki https://github.com/mbostock/d3/wiki/CSV#wiki-parse 的示例

年份、品牌、型号、长度

1997,福特,E350,2.34

2000，水星，美洲狮，2.38

当使用 d3 的 CSV 解析器解析时，结果数据将由以下数组表示：

[
  "Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34",
  "Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"
]

注意大写的对象键。要访问第一个条目的年份，data[0].Year 中带有大写 Y 的“年份”是必需的。

因此，在您的 forEach 函数中，您需要：

data.forEach(function (d) 
    d.Date = parseDate(d.Date);
);

...及以后：

return date: d.Date, index: +d[name];