Javascript 我得到了以下错误。。。。[Uncaught InvalidCharacterError:未能对“元素”执行“setAttribute”:“0”不是有效的属性名称
我一直在尝试通过从csv文件获取数据来使用d3.js获取线图。我一直在尝试通过从csv文件获取数据来使用d3.js获取线图。我收到以下错误…[未捕获的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
<!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