I got the following error.... [Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name

javascript csv d3.js

10,052

You 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 coming 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.

10,052

Author by

Jitendra

Updated on June 11, 2022

Comments

Jitendra almost 2 years

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

Jitendra about 10 years

On removing brackets, I get a parse error.Something that goes like this.. [d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNa]
meetamit about 10 years

There's either something wrong with the data you're passing in or the way the x and y domains are calculated. Impossible to debug without seeing the data. Check what x.domain() and y.domain() are. Look closely over the data array.