Issue on Data-Driven Documents (D3) click event

Question

I'm using D3: Data-Driven Documents Js library.I have plotted a bar chart as shown below.It is working fine.Now I have a requirement to send this.data array back to the parent component through events publish.But the problem here is when I clicked the bar chart item, the value of this.data is undefined.Which is correct.But can you tell me how to send the particular array (this.data) back to the parent component when the user clicks the bar chart item?

for (var i = 0; i < this.data.length; i++) {
            var item = this.data[i];
            this.svg.append("rect")
                .attr("class", "interval")
                .attr("y", offset + item['start'] * max_height / 86400)
                .attr("x", horz_inset)
                .attr("height", item['length'] * max_height / 86400)
                .attr("width", width - 2 * horz_inset)
                .on("click", function () {
                   this.events.publish('intervals', this.data);
                });
        }