gpt4 book ai didi

javascript - 我收到以下错误.... [Uncaught InvalidCharacterError : Failed to execute 'setAttribute' on 'Element' : '0' is not a valid attribute name

转载 作者:行者123 更新时间:2023-11-30 12:43:45 26 4
gpt4 key购买 nike

我一直在尝试通过从 csv 文件获取数据来使用 d3.js 获取线图。我一直在尝试通过使用 csv 文件中的数据来使用 d3.js 获取线图。我收到以下错误.... [Uncaught InvalidCharacterError: Failed to execute 'setAttribute on 'Element': '0' is not a valid attribute name. ]

谁能告诉我这是什么意思以及如何纠正它?

这是我用过的代码。

<!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_%x__%y"]

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

最佳答案

您错误地将数组传递给 attr,此处:

svg.append("path")
.attr(["d", valueline(data)]);// <-- this shouldn't be an array, just params

只需删除括号。

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

此外,请注意,在创建 SVG 的位置,您在之后立即向其附加了一个 g 元素,这导致变量 svg 被分配给该 g 而不是实际的 SVG 元素。这不是错误;一切仍然应该有效,但这可能不是你的意思。

关于javascript - 我收到以下错误.... [Uncaught InvalidCharacterError : Failed to execute 'setAttribute' on 'Element' : '0' is not a valid attribute name,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23401288/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com