D3 trying to access vis element in json object

Question

I'm trying to access the vis element in the json object below using D3 (see screenshot), but am unable to do so. I can access the key and value elements without any problems using code similar to the following:

console.log(d.key);

but this does not work (I get an undefined error):

console.log(d.vis);

Any ideas what I am doing wrong? Thank you!

Here are some code snippets:

var nested = d3.nest().key(function(d) { return d._id.stream; })
  .entries(data.result);

var stream = main.selectAll(".stream")
  .data(nested)
  .enter().append("g")
  .attr("class", "stream");    

  stream.append("rect")
  .attr("height",10)
  .attr("width", 25)
  .attr("x",width-215)
  .attr("y", function(d,i) { return height-400 + (i*40); })
  .attr("stroke", function(d) { return color(d.key);})
  .attr("fill",function(d) {
      if(d.vis=="1") {
        return color(d.key);
      }
      else {
        return "white";
      }
   })
   .on("click", function(d) {
     console.log(d);
     console.log(d.vis);  // undefined
     if(d.vis=="1") {
        d.vis="0";
      }
      else{
        d.vis="1";
      }
   });

Answer 1

It looks like the following is happening. The click handler function is executed. Inside, you're logging d.vis , which is undefined. The code immediately after that checks whether d.vis has a particular value, else sets it to "1". This "else" includes the undefined case.

So after the handler has been executed, d.vis is set for all d . The debugger you're using shows the value of the variable, which was modified after the console.log() statement . That is, at the time when you printed d , d.vis was indeed undefined. But you're setting it immediately afterwards, and that's what you get in the console.

The log doesn't take a snapshot of the state of the variable when it's printed, but shows you the current version which, in this case, has d.vis set.

Answer 2

pay attention to the data structure: see the fetchData.js, other than priceList and name, there should be vis element for determining whether to show the curve or not.

//The main data array of the graph
//format:
//data2 (List of fundObj)
//   fundObj (Name, priceList)
//      Name
//      vis
//      priceList (List of priceItem)
//         priceItem (date, price)

so, be clear about what is "d" in the code, it all depends on the data you passed to the call:

var fund = focus.selectAll(".fund")
        .data(data2)
        .enter().append("g")
        .attr("class", "fund");

Here data2 is the raw data, you may use other structure, but need to modify some of the code in places of "d".....