How are input parameters filled in javascript method chains?

Question

I am trying to really understand the details of how javascript works. During method chaining, sometimes one method returns to another method that has a named input parameter

Answer 1

The d corresponds to a single element in the set of data first passed in by .data(data).enter() in the earlier method call. What's happening is that d3 is implicitly looping over the corresponding dom elements that map to the data, hence the whole notion of data driven documents or d3.

That is, for each element in your data, when you call a selectAll() you should expect to see the same number of elements appended to the dom as there are in your data set. So when you hit a .attr() call, the single datum which corresponds to an element in the dom is passed in to the function. When you're reading

.append("rect").attr("width",function(datum){})...

you should read that as a single iteration over one element in your whole set of data that's being bound to your selection.

I'm a bit unsure I've answered your question as it seems to be both a mixture of questions about declarative/functional programming as well as method chaining. The above answer is with respect to the declarative/functional manner of d3. The below answer is in reference to method chaining.

Here's a great example that offers more insight into method chaining outlined by Mike Bostock's in his wonderful article http://bost.ocks.org/mike/chart/.

I recommend that you read through the d3 api found here (https://github.com/mbostock/d3/wiki/API-Reference) to further understand what each function is operating on. For example selection.filter Furthermore I highly recommend that you step in to a toy example such as the one that you've given to further understand what's going on.

Method chaining with respect to d3 reusable charts.

function SomeChart()
{
    var someProperty = "default value of some sort";

    function chartObject()
    {
    }

    chartObject.setSomeProperty(propertyValue)
    { 
     if (!arguments.length) return someProperty;
     someProperty = property;
     return chartObject;
    }

    return chartObject;
}  



var chart = SomehChart();

What is chart at this point?

chart = chart.setSomeProperty("some special value");

What is chart at this point?

chart = chart.setSomeProperty();

What is chart at this point?

What's the difference between the following?

var chart = SomeChart().setSomeProperty("some special value");

and

var chart = SomeChart();
chart.setSomeProperty();

The answer is that they're all the same except for when chart = chart.setSomeProperty();.