D3 console.log in a function chain

Question

Is there a base function/object in D3 which would allow "in-line" logging?

I'm reading Scott Murry's nifty D3 book and want to do this:

  d3.select("body").selectAll("div")
    .log("body")
    .data(dataset)
    .log("data")
    .enter()
    .log("enter")
    .append("div")
    .log("div")
    .attr("class", "bar")
    .log("class");

I currently do this Horrible Thing:

const log = function (msg, val) {
  const data = val ? val : this
  const label = msg ? msg : "data:"
  console.log(label, data)
  return data
}

Object.prototype.log = log

This works fine, producing this clickable console output: But .. What is the D3 way to do this?

Answer 1

For logging datas in your chain, you can just use a fake attribute :

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .attr("fake", d=> console.log(d));

For the other things, I don't think there is a "d3" way which allows to log and sadly, I think you have to do it with a normal way :

console.log(d3.select("body").selectAll("div").data(dataset).enter());

Answer 2

You could use your solution by modifying the d3 selection prototype (as opposed to the object prototype, I don't think that could be considered "horrible" - though I'm a little partial to messing with d3 internally), but I feel you are looking for selection.call().

If you want to access the current selection, but not interrupt method chaining, selection.call is probably your best bet:

Invokes the specified function exactly once, passing in this selection along with any optional arguments. Returns this selection. (docs)

The called function's first parameter will be the selection, further optional parameters can be passed in the call method itself. The general form is:

selection.call(func, arg, arg, ...)

function func(selection, arg, arg, ...) {}

Using selection.call for logging shouldn't be too hard to rig up with this method. Here's a quick mock up (v4/5):

var dataset = d3.range(10);

  d3.select("body").selectAll("div")
    .call(log,"body")
    .data(dataset)
    .call(log,"dataset")
    .enter()
    .call(log,"enter")
    .append("div")
    .call(log,"div")
    .attr("class", "bar")
    .call(log,"bar");

function log(sel,msg) {
  console.log(msg,sel);
}

And the results:

Here's the mock up in action.