score:2

Accepted answer

The reason is because in your first code example, you are appending to the element return from the data (which doesn't exists) whereas on the second one you are appending to the this.axis element which from your code is the svg element (this.axis = this.svg).

You in order to make your first example you to work you need to call enter() when after you call data() as follows:

this.axis
 .selectAll("g.axis-y")
 .data([{}]).enter()
  .append("g")
  .attr("class", "axis-y")

Hope this helps.

score:0

this.axis
    .selectAll("g.axis-y")
    .data([{}])

this.axis
    .append("g")
    .attr("class", "axis-y")

Is not the same as

this.axis
    .selectAll("g.axis-y")
    .data([{}])
    .append("g")
    .attr("class", "axis-y")

This is the same...

var thisAxis = this.axis
    .selectAll("g.axis-y")
    .data([{}])

thisAxis
    .append("g")
    .attr("class", "axis-y")

Related Query