我收到以下错误.... [Uncaught InvalidCharacterError:无法在'Element'上执行'setAttribute':'0'不是有效的属性名称

时间:2014-05-01 02:44:49

标签: javascript csv d3.js

我一直试图通过从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

1 个答案:

答案 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;一切仍然有效,但它可能不是你的意思。