mulitple click events on d3.js chart clashes with each other

[Saloni Desai]

I have implemented a scatterplot using d3.js v3. On that plot I want to add right-click event listeners to display custom context menu. I want data points to have right-click event and chart background also has right-click event listeners. To avoid the behavior of both listeners to clash with each other, I added d3.event.stopPropogation() in the data point click function as it is the child element of svg. Because of this, there is no clash but the right-click function on the chart background doesn't work correctly. It wouldn't fire the event function every time there is right click on chart background. 

//chart beckground

d3.select(".focus").on("contextmenu", function () {

var newData;

var annotateDot;

var titleContent;

var xPosition;

var boxPosition;

var positionValue;

var momentData = [];

newData = d3.mouse(this);

xPosition = newData[0];

console.log("right click on focus");

d3.event.preventDefault();// to avoid browser context menu to display

}

//right click function on data point

eventGroup.select("circle")

.attr("class", "dot")

.attr("r", 4)

.attr("cx", 10)

.attr("cy", 10)

.attr("fill", function(d) {

if (d.textArea) {

return "url(#annotateIcon)";

} else {

if (d.evtColor) {

return d.evtColor;

} else {

return "#229ae5";

}

}

})

.attr("stroke", function(d) { return d.evtColor ? d.evtColor : "#229ae5"; })

.attr("stroke-width", 2)

.on("contextmenu", function(d) {

var position = d3.mouse(this.parentNode);

var _this = this;

var boxPosition;

var positionValue;

var xPosition = this.getBoundingClientRect().x;

d3.event.stopPropagation();// to avoid over-ridding of click event on the chart background

}

Is there any other way of doing this that will not cause this behavior to occur ? Is my approach to solve the clash of the event behavior correct ?