Your excellent new documentation led me to try using enter() and exit(), but I seem to be doing something wrong.
I have the most recent version of d3 (git log says feb 2011).
To try to make a simple example, I edited your stack.html example as follows, starting at about line 85 in the original. I didn't see an easy way to add an id to the array of arrays, so I used a summation. I figured that summing the data y
values should produce a unique id.
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h + p);
var layers = vis.selectAll("g.layer")
.data(data, function(d,g,i){
var sumd = 0;
d.map(function(val){ sumd += val.y ; });
return sumd;
});
layers.enter().append("svg:g")
.attr("fill", function(d, i) { return color(i / (n - 1)); })
.attr("class", "layer");
However, while the sums work, the layers object is an array of nulls, and the enter().append
line does nothing, and the subsequent bars lines do nothing either.
I started to dig at the source code, and I can't see what might be going on...but mostly because I don't understand all of the logic flows yet. It does seem like the join function might get called twice, but I was only seeing it called once, so I'm not sure.
My use case is to have stacked bar charts, and to be able to insert and remove series in the stack, as well as to extend or shrink the time scale (x-axis), so being able to use enter and exit would rock. Any help or insight would be appreciated.
Regards,
James
Should the this
context of property functions be a Node
or a singleton selection, as in d3.select(this)
? The singleton selection is convenient in some cases, but it does not provide the complete functionality of the W3C DOM API, and extracting the element is a bit awkward: this[0][0]
.
Also, there are cases where callbacks are associated with individual nodes (such as "mouseover") and other cases where there are multiple nodes (such as the .call
method, and non-staggered transition "end"). Maybe it's only in the latter where we use a selection as the this
context.
Also, we could shorten the syntax to d3(this)
rather than d3.select(this)
to make it easier to convert. And this.node()
might be clearer than this[0][0]
.