vis.selectAll("text").data(data).enter().append("svg:text") v.s. vis.append("svg:text")

[Guan-Cheng Li]

Hi,

Sorry if my question looks really basic. I can't tell the difference
between

vis.selectAll("text").data(data).enter().append("svg:text")

and

vis.append("svg.text") .

I saw from d3 examples that in vis.append() the direct append has been
used couple times.. In this case would the data must have been
declared somewhere earlier?

Thanks!

Guan-Cheng

[Jason Davies]

On Wed, Jul 27, 2011 at 12:01:12AM -0700, Guan-Cheng Li wrote:
> Sorry if my question looks really basic. I can't tell the difference
> between
>
> vis.selectAll("text").data(data).enter().append("svg:text")
>
> and
>
> vis.append("svg.text") .

The first will bind data to the selection, and then append nodes to the
entering selection. I recommend reading the Three Little Circles
tutorial: http://mbostock.github.com/d3/tutorial/circle.html

The entering selection will determine how many new nodes are appended
(could be zero).

See also: https://github.com/mbostock/d3/wiki/Selections#data

The second simply appends a single element to "vis".

> I saw from d3 examples that in vis.append() the direct append has been
> used couple times.. In this case would the data must have been
> declared somewhere earlier?

Appending doesn't depend on data binding directly. That's the beauty of
it. :) Appending can happen on a normal selection of elements, e.g. in
your example above, "vis" probably refers to the <svg> element.
Alternatively, you can append to a "special" selection, for example the
entering selection is created when you bind data to a selection.

Maybe it helps to walk through it a bit. Let's assume "vis" is a
container element:

var vis = d3.select("body").append("svg:svg");

You also want to add some "width" and "height" attributes, like in the
examples, but I'm leaving them out for brevity.

var text = vis.selectAll("text")

This will return a selection of all "text" elements. Currently <svg>
has no child elements, so this will be a zero-length, empty selection.

.data([1, 2, 3]);

This will bind a 3-element array to the selection of "text" elements.
This implicitly creates two selections that you can use: enter() and
exit().

text.enter()

This retrieves the entering selection, which has three empty slots. You
can append a single element to one of these slots, e.g.

.append("svg:text")
.text("some text");

You can also access the updating selection i.e. the zero-length, empty
selection mentioned above. If there are already text elements then this
will *update* the existing elements, hence the name "updating"
selection.

text.text("some text");

Lastly, the exiting selection returned by text.exit() is also
zero-length in this case.

If we subsequently bound a zero-length array to the above selection e.g.

var text = vis.selectAll("text").data([]);

Then text.exit() would have the three <text> elements that no longer
join with the data bound to the selection. Normally they are removed,
or faded out.

text.exit().remove();

The Three Little Circles explains all of this, with interactive
examples!

--
Jason Davies, http://www.jasondavies.com/