Geek Answers Handbook

Why is my d3 data output after the body?

This is a simple page demonstrating some basic d3 features. I made a dataset var dataset = [3,1,4,1,5]; and would like to deduce it, as well as some paragraphs. Data appears, but after the body! Strange ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> demo project</title> <script type="text/javascript" src="d3/d3.v2.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("hello!"); d3.select("p").append("text").text(" hello!!"); d3.select("body").append("p").text("hello2!"); d3.select("p:nth-child(3)").append("text").text(" hello2!!"); var dataset = [3,1,4,1,5]; d3.select("p:nth-child(3n+1)") .data(dataset) .enter() .append("p") .text(function(d) { return d; }); d3.select("p:nth-child(7n + 1)").append("text").text("hello againss?"); </script> </body> </html>

The page is as follows:

enter image description here

and the DOM looks like this (note that the data appears after the body body tag):

enter image description here

Also note that the line is d3.select ("p: nth-child (7n + 1)"). append ("text"). text ("hello againss?"); should have been printed after all my data, but it is not displayed.

+4
source share
1 answer

The short answer is that in your particular case, the choice of enter () parentNode is document (not body ).

Take a simple example to see what the enter () selection looks like. Assuming we have a document with a body without any p elements.

 var ps = d3.select("body").selectAll("p") .data([0, 1, 2]);

Since there are no p elements, choosing enter () will have three elements. Let check input selection:

ps.enter ()

You see that the internal array has a property called parentNode. When you add new elements using selection.append () or selection.insert () new elements will be created as children of this parentNode.

So, when checking ps.enter()[0].parentNode , the body element will be shown. Now it becomes clear that when combining data, the choice before selectAll indicates parentNode; in the above case d3.select("body") .

What if we missed the select ("body") part in the data connection?

 // example of bad data join var ps2 = d3.selectAll("p") .data([0, 1, 2]);

It turns out that in this case ps2.enter()[0].parentNode is #document ! This means that if you add elements using this enter () parameter, they will become child documents. The append method will add them to the end of the document; those. after the body.

The last case is basically what you come across. Your data is attached and entered incorrectly; he should follow this pattern:

 d3.select(parent).selectAll(element) .data(data) .enter().append(element);

By the way, the HTML text element is missing. So append("text") does not seem significant.

+7
source

More articles:


All Articles