我一直试图通过从csv文件中获取数据来使用d3.js获取线图。我一直试图通过使用来自csv文件的数据来使用d3.js获得线图。我收到以下错误.... [Uncaught InvalidCharacterError:无法在'Element'上执行'setAttribute':'0'不是有效的属性名称。 ]
任何人都可以告诉我这意味着什么以及如何纠正它?
这是我用过的代码。
<!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>
<script type="text/javascript" src="d3/d3.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%a_%b_%d_%x__%y").parse;
// Get the data
d3.csv("Sorted Dates.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
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.close); });
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 + ")"
);
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path") // Add the valueline path.
.attr(["d", valueline(data)]);
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
</html>
我的csv文件以这种方式拥有数据。这种格式是否正确? [ “%A_%B_%D_%×__%Y”]
Sun Jan 18 07:38:02 1970,3 Sun Jan 18 07:39:06 1970,4 Sun Jan 18 10:49:53 1970,2 Sun Jan 18 10:54:04 1970,4 Sun Jan 18 10:55:23 1970,4
答案 0 :(得分:3)
您错误地将数组传递给attr
,此处:
svg.append("path")
.attr(["d", valueline(data)]);// <-- this shouldn't be an array, just params
只需删除括号。
为将来的调试提示:
这个错误是由d3抛出的,这就是为什么Chrome开发工具(或者你使用的任何控制台)都会显示它来自d3.js源文件。但是,如果在控制台中展开错误并查看堆栈跟踪,则可以在自己的代码中检测到错误。它会显示您自己的源代码中不正确地调用d3&#39; s attr()
的行号,这会导致d3遇到错误。
另外,
请注意,在您创建SVG的位置,您之后会立即向其添加g
元素,这会导致将变量svg
分配给g
而不是{{1}}实际的SVG元素。这不是一个bug;一切仍然有效,但它可能不是你的意思。