겉으로가 아닌 전체 요소를 통해

Question

내가 가지고 D3 프로젝트에서 다음 코드를

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); 
    } 

} 

나는 단어 전체에 걸쳐 보이지 않는 상호 작용을 새로 고침 텍스트에 내 커서를 이동하면 - 왜 이거 야? 그리고 모든 텍스트가 이벤트를 유발할 수 있도록 위의 내용을 어떻게 수정합니까?

전체 프로젝트의 라이브 예를

은 여기에 있습니다 :

Answer 1

http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview 내가 파이 차트에있는 새로 고침 버튼 ontop이있는 컨테이너를 기준으로 인해 생각합니다. 나는 몸에 새로 고침 버튼을 추가하고, 문제를 해결하기 위해 같았다 :

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