i'm using d3, and i find myself with a problem making a bar chart with time scale in the x axis,
this.columns = svg.selectAll("rect")
.data(data);
this.columns.enter().append("rect")
.attr("class", "bars")
.attr("clip-path", "url(#clip)")
.attr("width", tempW )
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return return y(d.values["count"]);} )
.attr("height", function(d) { return height4 - y4(d.values["count"])-0.5; })
this is the code that i'm using, the problem is that it always leave one column (bar) out, for example if the data array have 120 items, it prints 119, when i made a console.log to the enter() function, i discovered that the data index (in the enter() call) is starting from 1 and not from 0, which cause that whatever item is in the first position is missing, i don't know why is this happening.
Asked
Active
Viewed 24 times
0
Douglas Cardona
- 151
- 1
- 6
-
1You have a `rect` item in the SVG already. Use `svg.selectAll("rect.bar").data(data);` and set the class "bar" on the appended elements. – Lars Kotthoff Apr 11 '16 at 22:29
-
@LarsKotthoff you are right, now it prints everything, i'm gonna look for that rect element, but for now you saved my life, thanks a lot, (make an answer so i can rate it correct) – Douglas Cardona Apr 11 '16 at 22:39
-
I'll mark it as a duplicate -- this issue has come up several times in the past. – Lars Kotthoff Apr 11 '16 at 22:41
-
Ok, thanks a lot again. – Douglas Cardona Apr 11 '16 at 22:43
-
You're welcome, glad it's working now! – Lars Kotthoff Apr 11 '16 at 22:44