CODEWITHSUNDEEP
javascriptd3.js
jayko03
jayko03

Reputation: 2481

Why does separating a d3 method chain on enter alter outcome?

I am learning D3.js and curious on the chaining of methods

This script works:

var data = [32, 57, 112, 250]

var svg = d3.select("svg")

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30 })
    .attr("r", function(d) { return Math.sqrt(d); })

But this script results in nothing:

var data = [32, 57, 112, 250]

var circles = d3.select("svg").selectAll("circle");
circles.data(data);

var circlesEnter = circles
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30})
    .attr("r", function (d) { return Math.sqrt(d)})


I don't see the different effects on these two different approaches. Can anyone tell me the difference between these?

Thanks in advance!

Upvotes: 1

Views: 131

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38171

The issue is that selection.data() doesn't modify an existing selection, it returns a new selection:

[selection.data] Binds the specified array of data with the selected elements, returning a new selection that represents the update selection: the elements successfully bound to data. Also defines the enter and exit selections on the returned selection, which can be used to add or remove elements to correspond to the new data. (from the docs)

Also,

Selections are immutable. All selection methods that affect which elements are selected (or their order) return a new selection rather than modifying the current selection. However, note that elements are necessarily mutable, as selections drive transformations of the document! (link)

As is, circles contains an empty selection of circles (size: 0) with no associated data array. Because it is immutable, calling circles.data(data) won't change that selection, and circles.enter() will remain empty. Meanwhile the selection created by circles.data() is lost as it isn't assigned to a variable.

We can chain methods together as in the first code block of yours because the returned selection in the chain is a new selection when using .data(), .enter(), or selectAll(). Each method in the method chain uses the selection returned by the previous line, which is the correct one.

In order to break .data() from the chain, we would need to create a new intermediate selection with selection.data() to access the enter selection:

var circles = d3.select("svg").selectAll("circle");   

var circlesData = circles.data(data);

var circlesEnter = circlesData
  .enter()
  ...


var data = [32, 57, 112, 250]

var circles = d3.select("svg").selectAll("circle");

var circlesData = circles.data(data);

var circlesEnter = circlesData
    .enter()
    .append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30})
    .attr("r", function (d) { return Math.sqrt(d)})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

But this would be a bit of an odd approach.

Upvotes: 5

Related Questions