Unable to get the zoom object

[ptagl]

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!

[liuyepiaoxiang]

You just make something wrong.
It doesn't container a zoomend api in it's document, it's zoomable.
var chart = d3.chart.eventDrops() .zoomable(true)
That will be work.

[ptagl]

@liuyepiaoxiang thanks for your answer.

I tried as you said:

var chart = d3.chart.eventDrops().zoomable(true);
this.timeline = d3.select('#visual').datum(data).call(chart);
console.log("2 - " + this.timeline[0]); // Output: undefined

but I'm still getting undefined.

[liuyepiaoxiang]

That you can try do not use d3.chart.eventDrops(),use eventDrop directly.like this
var chart= eventDrops().zoomable(true); this.timeline = d3.select('#visual').datum(data).call(chart);
If you still have problems, you can provide more details.