marmelab/EventDrops

Unable to get the zoom object

Open

#168 opened on Aug 9, 2017

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (1,219 stars) (249 forks)batch import
help wanted

Description

Hello everybody!

I'm currently using EventDrops in an Angular 4 application. I need to set the zoom programmatically, so I read the documentation and the example:

var eventDropsChart = d3.chart.eventDrops();
var element = d3.select('#chart_placeholder').datum(...);
eventDropsChart.call(eventDropsChart);
var zoom = element[0][0].zoom;

I have something similar in my code:

var chart = d3.chart.eventDrops()
            .date(d => d.date)
            .start(minDate)
            .end(maxDate)
            .mouseover(this.showTooltip)
            .mouseout(this.hideTooltip)
            .click(this.onEventClick)
            .zoomend(this.onZoomEnd)
            .eventLineColor((d, i) => colors[i]);

this.timeline = d3.select('#visual')
            .datum(data)
            .call(chart);

console.log("ZOOM");
console.log(this.timeline[0]); // Ouptut: undefined

but then I got undefined, so I'm unable to get the zoom.

I also tried to change the code to:

this.timeline = d3.select('#visual')
            .datum(data);

chart.call(chart);

console.log("ZOOM");
console.log(this.timeline[0]);

But then I got another error:

Cannot read property 'each' of undefined at Function.e (eventDrops.js:1)

Is it a bug or am I doing something wrong?

Thanks!

Contributor guide