y-axis scale undefined within anonymous function

Question

I'm having trouble seeing why the below code is not working for me.

NOTE : I am using D3 v4.

// DATA JOIN
var dataJoin = vis.svg.selectAll(".group")
  .data(vis.displayData);

// ENTER + UPDATE
var group = dataJoin.enter().append("g")
  .attr("class", "group");

group.append("path") // ENTER
  .attr("class", "line")
  .style("opacity", 0.5)
  .merge(group) // ENTER + UPDATE
    .transition()
    .duration(800)
    .attr("d", function(d) {
      return vis.y(d.beginDate); <------- vis.y() is undefined
    });

For each element in displayData I would like to create a separate custom path element (ie, custom shape) that is placed along the y-axis. Each path element needs to use the vis.y() scale in order for me to be able to place the path element on the appropriate point along the y axis.

HOWEVER, vis.y() is undefined inside of the .attr function call. Why? I've built other D3 visualizations (although, those were using version 3) and have used the scale inside of the .attr function call, so why is this having an issue now?

I'm basically trying to add a custom shape with a custom path for each element that starts at a different location on the y axis. If you feel like I'm going about this the wrong way, feel free to give me other suggestions.

It uses the following scale:

vis.y = d3.scaleTime()
  .range([vis.height, 0]);

vis.y.domain([
  d3.min(vis.displayData, function(d) { return d.beginDate; }),
  d3.max(vis.displayData, function(d) { return d.endDate; })
]);

The data is an array of objects structured like the below:

var obj = {
  name: d.Name,
  type: d.type,
  beginDate: d.beginDate,
  endDate: d.endDate,
  eventDate: d.eventDate
};

Answer 1

I found out what was happening, but still can't explain WHY it's happening. I'm going to provide two examples, both examples are exactly the same except for one line:

Vis is undefined

.attr("d", function(d) {
  return d.beginDate;
});

Vis is defined

.attr("d", function(d) {
  return vis.y(d.beginDate);
});

What I mean when I say "defined" vs "undefined" is, when I step through the code, break on the return statement, and then type "vis" in the console, in one case an object is returned and in another case the object is undefined.

When I declare vis.y() within the return statement before running the application for some reason the vis is defined, otherwise it's not. These fiddles should show both the broken and working behavior (although, I couldn't put a break point in the actual fiddle because I have no idea where the JS lives in the "sources" view. I ran both of them locally.). Again, the only difference is the one line above.

Broken (vis is undefined)

https://jsfiddle.net/jtLp2wzg/

Working (vis is defined)

https://jsfiddle.net/39exh1s8/1/