All geek questions in one place

Choosing a null value: what is the reason for "selectAll (null)" in D3.js?

I saw some D3 codes with this pattern for added items:

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

I really don't get this snippet. Why a choice null?

As I understand it D3, if you add circles, it should be:

var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle");

Similarly, if you add HTML paragraphs, this should be:

var circles = svg.selectAll("p")
    .data(data)
    .enter()
    .append("p");

The same applies to classes: if one of them adds elements with a class foo, it should be selectAll(".foo").

However it selectAll(null) works ! Items are added.

So what is the meaning of this null? What am I missing here?

: , "" Q & A , . API. , StackOverflow.

+8
1

TL;DR

selectAll(null) , , "enter" , .

"enter"

, , "enter" D3.js. , , , D3 DOM.

D3.js, DOM, :

  1. ;
  2. , ;
  3. , ;

β„– 3 DOM "enter".

, D3.js "enter" - , , DOM. "enter", D3 , .

, / DOM:

enter image description here

DOM

.

...

var circles = svg.selectAll("circle")
    .data(data)

... , . D3 lingo, "" .

...

.enter()
.append("circle");

... "enter", , .

, ( ), ( ) selectAll . , , svg <circle>, selectAll("circle") .

. <body> <p>, "enter" :

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(d=> "I am a " + d + " paragraph!")
  .style("color", String)
<script src="https://d3js.org/d3.v4.min.js"></script>
Hide result

, ? :

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(d=> "I am a " + d + " paragraph!")
  .style("color", String)
<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Look Ma, I'm a paragraph!</p>
Hide result

: ! ?

, "", . ( "enter"), .

, selectAll("p"), , , <p> ! <p>.

, selectAll(null), , ! , , "enter" , .

, :

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .text(d=> "I am a " + d + " paragraph!")
  .style("color", String)
<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Look Ma, I'm a paragraph!</p>
Hide result

null: , .

, selectAll(null) : DOM, -.

, jsPerf:

https://jsperf.com/selecting-null/1

selectAll(null) . , DOM, .

selectAll (null)

, selectAll(null) DOM. , .

, , , "" ( ""), selectAll(null). ( ), .

, , - :

//this is the "update" selection
var circles = svg.selectAll("circle")
    .data(data);

//this is the "enter" selection
circles.enter()
    .append("circle")
    .attr("foo", ...

//this is the "exit" selection
circles.exit().remove();

//updating the elements
circles.attr("foo", ...

, selectAll(null), , , .

PS: , selectAll(null) : https://github.com/d3/d3-selection/issues/79

+21

Source: https://habr.com/ru/post/1685410/

More articles:


All Articles