Problem with Mouse Interaction with Two EventDrops in a UI
malishahi opened this issue · comments
Hi,
I am using two EventDrops in one UI component. I am wondering if this works.
I have this problem that only one of the EventDrops is interactive with mouse interactions, the other does not respond. Some pieces of the code are as the following: any suggestion?
`
render() {
const t = this.props.t;
return (
<Panel title={t('Schedule and Timeline')} >
<EventTimeline height={500} margin={{ left: 40, right: 5, top: 5, bottom: 20 }} data={this.state.recommendationsData} tooltipSpec={this.state.tooltipSpecRec} />
<EventTimeline height={500} data={this.state.eventsData} tooltipSpec={this.state.tooltipSpecEvent} />
</Panel>
);
}`
This is my eventtime line component based on eventdrops:
createEventTimeline() {
const data = this.props.data;
const tooltipSpec = this.props.tooltipSpec;
/*const tooltip = d3
.select('body')
.append('div')
.classed('tooltip', true)
.style('opacity', 0);
const tooltip =
*/
this.tooltipNode
.classed('tooltip', true)
.style('opacity', 0);
const chart = eventDrops({
d3,
zoom: {
onZoomEnd: () => { }, //updateCommitsInformation(chart),
},
height: '800',
line: (line, index) => index % 2 ? 'lavenderBlush' : 'papayaWhip',
drop: {
date: d => new Date(d.date),
onMouseOver: event => {
this.tooltipNode
.transition()
.duration(200)
.style('opacity', 0.8);
let tooltipContent = '<div class="content">';
for (const key in tooltipSpec) {
tooltipContent = tooltipContent.concat(`<p class="message">${tooltipSpec[key]} ${event[key]}</p>`);
}
tooltipContent = tooltipContent.concat('</div>');
this.tooltipNode
.html(tooltipContent)
.style('left', `${d3.event.pageX - 30}px`)
.style('top', `${d3.event.pageY + 20}px`);
},
onMouseOut: () => {
this.tooltipNode
.transition()
.duration(500)
.style('opacity', 0);
},
},
});
//d3.select('#eventdrops-demo')
this.eventElem
.data([data])
.call(chart);
}
render() {
const t = this.props.t;
return (
<div ref={node => this.containerNode = node} height={this.props.height} width="100%">
<div ref={node => this.eventElem = d3.select(node)} />
<div ref={node => this.tooltipNode = d3.select(node)} />
</div>
);
This issue may have been fixed in the 1.0.1
release (published a few minutes ago), thanks to the #212 PR. Can you give it a try?
Worked for me @jpetitcolas .
Another problem I am facing is about the position of tooltips when I have two event-drops component in a page. Tooltips got rendered far from the real drop.
Well, tooltips are not handled by event-drops
directly. I guess you need to handle window.scrollX
and window.scrollY
in your code too? As this is not an event-drops
issue, I invite you to open a question on StackOverflow? :)