Retrieve layer selection from inside layer

[samselikoff]

Is it possible to retrieve a layer's selection from inside the layer? Right now I generally see the layer's selections stored in a hash

chart.areas =  {
  lines: chart.base.append('g').attr('class', 'lines');
}

...

chart.layer('lines', chart.areas.lines, {
  ...
  // refer to chart.areas.lines here
}

which works, but it would be nice to be able to refer to the selection in case I didn't do this, e.g.

chart.layer('lines', chart.base.append('g'), {
  ...
  // how can I get the selection?
}

[iros]

Hi Sam,

You can get the layer selection inside of dataBind - it's actually the context of that function.
The context of insert is the data binding.
The context of each lifecycle method is the lifecycle selection.

Does this help?

[samselikoff]

In this case it doesn't, but maybe the need is just specialized enough that I have to store it in that hash. I need it in my enter event:

"enter": function() {
  var chart = this.chart();

  this
    .style('opacity', '0.2')
    .style('fill', chart._actualColor.bind(chart))
    .style('stroke-width', '0')
    .on('mouseover', function(d, i) {
      d3.select(this).classed('active', true);
      chart.areas.lines.classed('selected', true);
    }).on('mouseleave', function(d, i) {
      d3.select(this).classed('active', false);
      chart.areas.lines.classed('selected', false);
    });
}

Ideally I'd like to be able to refer to the layer's selection using something like this.base(), rather than referring to chart.areas.lines. It seems like better encapsulation - layer should know about its base selection - but maybe it's fine in this context.

[iros]

Hi Sam,

Inside any of the lifecycle events this will always refer to the associated selection, like a databinding.enter() - this is the only way we can give you access to those selections. As such, it doesn't make sense to overwrite that to instead provide access to the layer inside of those methods.

Additionally, the context with which you are operating is the DOM event callback which is actually controlled by d3, not us. this inside of your mouseover and mouseleave will always be the DOM node in question and we wouldn't be overwriting that.

this inside of dataBind is the layer base, but that's the only place in which that is the case.

We're open to hearing other ideas of how to access the layer base selection.

@jugglinmike, does it make sense to add base back to layer and tack it on to lifecycle selections in the same way we add chart() to them to gain chart access to parent chart? If we want to allow true encapsulation of layers as separate entities, then they shouldn't have to reference the chart root to obtain their own base.

[samselikoff]

@iros right, this is more along the lines of what I was thinking. I wasn't saying to overwrite this to make it refer to the base, but rather doing something like this.base() to access the layer's base (from within the layer).

[jugglinmike]

@iros:

If we want to allow true encapsulation of layers as separate entities,

This assumption takes for granted what is essentially a new conception of d3.chart's "Layer" object. From #43 (it's not every day I get to quote myself):

I can appreciate your desire to keep related entities "close". At the moment, the best I can do is suggest that you re-frame your conception of an "entity". Layers are internal chart structures. When others want to re-use your work, it's the charts they will be interfacing with. So even though declaring closely-related elements as distinct layers may feel a bit disorganized, the chart is the real unit of d3.chart.

This is not to say that I'm against re-framing the way we think about layers, though. What's important to me is that we're deliberate about it. In this case, it will probably involve a lot more change than attaching a base method to the existing Layer object.