I have been trying to get a line plot using d3.js by getting data from a csv file. I have been trying to get a line plot using d3.js by using data from a csv file. I got the following error.... [Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name. ]
Can anyone please tell me what this means and how to rectify it?
This is the code that I have used.
<!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>
My csv file has data in this manner. Is this format correct? ["%a_%b_%d_%x__%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
I have been trying to get a line plot using d3.js by getting data from a csv file. I have been trying to get a line plot using d3.js by using data from a csv file. I got the following error.... [Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name. ]
Can anyone please tell me what this means and how to rectify it?
This is the code that I have used.
<!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>
My csv file has data in this manner. Is this format correct? ["%a_%b_%d_%x__%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
Share Improve this question asked May 1, 2014 at 2:44 JitendraJitendra 3072 gold badges3 silver badges9 bronze badges 2-
Doesn't look like there is a
.setAttributeany where in there. Are you sure thats the code you're getting the error from? – Brendan Commented May 1, 2014 at 2:50 - that is from the d3.js file – Jitendra Commented May 1, 2014 at 6:53
1 Answer
Reset to default 4You are mistakenly passing an array to attr, here:
svg.append("path")
.attr(["d", valueline(data)]);// <-- this shouldn't be an array, just params
Just remove the brackets.
Tip for future debugging:
This error was thrown by d3, which is why Chrome dev tools (or whatever console you work with) shows it ing from the d3.js souce file. But you could detect the error in your own code if you expand the error in the console and view the stack trace. It would show you the line number in your own source code that was improperly calling d3's attr() which in turn caused d3 to encounter the error.
Also,
Notice where you're creating the SVG, you're appending a g element to it immediately after, which causes the variable svg to be assigned to that g rather than the actual SVG element. It's not a bug; everything still should work, but it's probably not what you meant.