I draw A rect and text on svg.

In order to show text, I render rect first.

I add mouse click event to rect

when I click the text, it seems the rect is not selected, because rect is behind text, so text is selected frist.

I need to select trigger the event when mouse click inside the rect.

How should I do?

Thanks!

Fiddle

You can see, when you mouse click on the text, the rect is not clicked.

var data = ["TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE"];

var svg = d3.select("svg");
var bar = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(100,100)"; });

bar.append("rect")
    .attr("width", 200)
    .attr("height", 50)
    .style("fill", "#f00")
    .on("click", function (d) {
                            alert("text");
                    });
bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

I draw A rect and text on svg.

In order to show text, I render rect first.

I add mouse click event to rect

when I click the text, it seems the rect is not selected, because rect is behind text, so text is selected frist.

I need to select trigger the event when mouse click inside the rect.

How should I do?

Thanks!

Fiddle

You can see, when you mouse click on the text, the rect is not clicked.

var data = ["TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE"];

var svg = d3.select("svg");
var bar = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(100,100)"; });

bar.append("rect")
    .attr("width", 200)
    .attr("height", 50)
    .style("fill", "#f00")
    .on("click", function (d) {
                            alert("text");
                    });
bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

• javascript
• svg
• d3.js
• mouseevent

• Why don't you just set the same click handler on the text element? – Florian Gl Commented Nov 6, 2014 at 14:18
• Actually, In my case, the text has data(the real problem is much plicated), and every rect has its own data, so when you click function (d) { alert("text"); } d is different, thanks. – yongnan Commented Nov 6, 2014 at 14:21

2 Answers 2

You can attach a style to the text to ignore mouse events. Here is the example:

Style:

.bar-text {
    pointer-events: none;
}

Modified code:

bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("class", "bar-text") // add class
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

Attach the handler to the g element. Complete demo here.