auf Click-Ereignisse scheinbar nicht über das ganze Element

Question

Ich habe den folgenden Code in einem D3 Projekt:

function addSquare() { 

    //Create SVG element 
    var SQsvg = d3.select("#square") 
    .append("svg") 
    .attr({ 
     "width": 70, 
     "height": 20, 
     id: "squaresArea" 
    }) 
    .on("click", resetRefresh); 


    SQsvg.append("text") 
    .text("Refresh") 
    .attr({ 
     x: 15, //margin.left, 
     y: 15, 
     "font-family": "sans-serif", 
     "font-size": "14px", 
     "text-decoration": "underline", 
     fill: "blue" 
    }) 
    .on("click", resetRefresh); 

    function resetRefresh() { 
    console.log("hello") 
     //update bar chart when user selects a square 
    dsPieChart(initialMeasure, pieDataCSV); 
    TOPbarChartUpdate("N", initialMeasure, "lightgrey",false); 
    } 

} 

Wenn ich meine Cursor auf den Text Aktualisieren Sie die Interaktivität zu bewegen scheint nicht das ganze Wort zu überspannen - warum ist das? und wie ändere ich das oben genannte so, dass der gesamte Text das Ereignis auslöst?

Ein anschauliches Beispiel des gesamten Projekts ist hier: http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview

Answer 1

Ich denke, die aufgrund der Behälter das Kreisdiagramm in ist ontop der Schaltfläche Aktualisieren ist. Ich habe auf die Schaltfläche Aktualisieren, um den Körper angehängt, und schien das Problem zu lösen:

d3.select('body').append('svg').append("text") 
    .text("Refresh") 
    .attr({ 
     x: 15, //margin.left, 
     y: 15, 
     "font-family": "sans-serif", 
     "font-size": "14px", 
     "text-decoration": "underline", 
     fill: "blue" 
    }) 
    .on("click", resetRefresh); 

http://plnkr.co/edit/rc78OaAZbOVPjPznGKok?p=preview