Javascript 我得到了以下错误。。。。[Uncaught InvalidCharacterError:未能对“元素”执行“setAttribute”:“0”不是有效的属性名称

Javascript 我得到了以下错误。。。。[Uncaught InvalidCharacterError:未能对“元素”执行“setAttribute”:“0”不是有效的属性名称,javascript,csv,d3.js,Javascript,Csv,D3.js,我一直在尝试通过从csv文件获取数据来使用d3.js获取线图。我一直在尝试通过从csv文件获取数据来使用d3.js获取线图。我收到以下错误…[未捕获的InvalidCharacterError:未能在“元素”上执行“setAttribute”:“0”不是有效的属性名称。] 谁能告诉我这是什么意思以及如何纠正 这是我使用的代码 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 12px Ari

我一直在尝试通过从csv文件获取数据来使用d3.js获取线图。我一直在尝试通过从csv文件获取数据来使用d3.js获取线图。我收到以下错误…[未捕获的InvalidCharacterError:未能在“元素”上执行“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_u%b_%d_%x_uu%y]

1970年1月18日星期日07:38:02,3 1970年1月18日星期日07:39:06,4 1970年1月18日星期日10:49:53,2 1970年1月18日星期日10:54:04,4
Sun Jan 18 10:55:23 1970,4

您错误地将数组传递给attr,如下所示:

只需拆下支架

未来调试提示: 这个错误是由d3引发的,这就是为什么Chrome dev tools或您使用的任何控制台显示它来自d3.js源文件的原因。但是如果您在控制台中展开错误并查看堆栈跟踪,您可以在自己的代码中检测到错误。它会在您自己的源代码中显示错误调用d3的attr whic的行号h反过来导致d3遇到错误

而且,
请注意,在创建SVG的位置,您会立即向其添加一个g元素,这会导致变量SVG被分配给该g而不是实际的SVG元素。这不是一个错误;所有操作都应该正常工作,但可能不是您的意思。

您错误地将数组传递给attr,如下所示:

只需拆下支架

未来调试提示: 这个错误是由d3引发的,这就是为什么Chrome dev tools或您使用的任何控制台显示它来自d3.js源文件的原因。但是如果您在控制台中展开错误并查看堆栈跟踪,您可以在自己的代码中检测到错误。它会在您自己的源代码中显示错误调用d3的attr whic的行号h反过来导致d3遇到错误

而且,
请注意,在创建SVG的地方,您会在后面立即添加一个g元素,这会导致变量SVG被分配给该g而不是实际的SVG元素。这不是一个bug;所有内容都应该正常工作,但可能不是您的意思。

在其中似乎没有.setAttribute。您确定吗这是从d3.js文件中获取错误的代码吗?这是从d3.js文件中获取错误的代码。其中似乎没有.setAttribute。你确定这是从d3.js文件中获取错误的代码吗?这是从d3.js文件中获取错误的代码在删除括号时,我得到一个解析错误。类似于这样的情况..[d=MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNa]您传入的数据或x域和y域的计算方式可能有问题。如果不查看数据,则无法进行调试。请检查x.domain和y.domain是什么。仔细查看数据数组。在删除括号时,我会遇到一个解析错误。类似于这样的情况…[d=MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNa]您传入的数据或x和y域的计算方式有问题。如果不查看数据,则无法进行调试。请检查x.domain和y.domain是什么。仔细查看数据数组。
svg.append("path")
    .attr(["d", valueline(data)]);// <-- this shouldn't be an array, just params