faq

FAQs

How do I access the chart again once I'm inside a lifecycle event callback?

There are two ways you can do it in. The context of a lifecycle event is a d3 selection but it has been ammended to give you access to the chart it belongs to. You can access it like so:

d3.chart("Circles", {
  initialize: function() {
    this.layer("circle").on("enter", function() {

      // get access to the chart
      var chart = this.chart();

      // get the fill
      this.style("fill", chart.fill());
    });
  },
  
  // getter setter for a fill
  fill : function(newFill) {
    if (arguments.length === 0) {
      return this.currentFill;
    }
    this.currentFill = newFill;
    return this;
  }
});

Alternatively, if you are binding your layer callbacks inside your initialize method, you can always set a var outside the scope to point to the chart like so:

d3.chart("CirclesChart").extend("CustomColorCirclesChart", {
  initialize: function() {
    
    // set the context chart outside the scope
    var chart = this;

    this.layer("circle").on("enter", function() {

      // get the fill, note we're using the chart
      // variable defined above outside this function.
      this.style("fill", chart.fill());
    });
  },
  
  // getter setter for a fill
  fill : function(newFill) {
    if (arguments.length === 0) {
      return this.currentFill;
    }
    this.currentFill = newFill;
    return this;
  }
});

Are there two different event types?

Yes. There are.

Lifecycle events are layer specific. A layer lifecycle event specifies the different state a datum can be in: new (entering), removed (exiting), pre-existing (update) and currently staged (merged - new and updated.) You can hook into each layer individually using lifecycle events like so:

d3.chart("CirclesChart").extend("RedCirclesChart", {
  initialize: function() {
    
    // hook into the enter event and change the
    // entering circles' color to red.
    this.layer("circle").on("enter", function() {
      this.style("fill", "red");
    });
  }
});

On the other hand there are chart specific events. They are primarily useful to notify other components on your page about what is happening in your chart. For example if a user clicked on an element of your chart, you might want to notify any potential listeners that a selection occured.

For example (see jsBin):

d3.chart("CircleChart", {
  initialize: function() {
    var chart = this;
    this.layer("circles", this.base.append("g"), {
      dataBind: function(data) {
        return this.selectAll("circle")
          .data(data);
      },
      insert: function() {
        return this.insert("circle")
          .attr("cy", 100)
          .attr("r", 4)
          .style("fill", "red")
          .on("click", function(d) {
            // when a user clicks a circle, just broadcast
            // the value that it represents. Note that `chart`
            // was defined above in the initialize method.
            chart.trigger("selected", d);
          });
      }
    });
  
    this.layer("circles").on("enter", function() {
      return this.attr("cx", function(d) { 
        return d; 
      });
    });
  }
});


var data = [10,30,40,50,70,80,120];
var chart = d3.select("#test")
  .append("svg")
  .style("width", 200)
  .style("height", 200)
  .chart("CircleChart");

// when we recieve a "selected" event, just console.log
// it for now.
chart.on("selected", function(d) {
  console.log(d);
});

chart.draw(data);