On Click事件看似没有在整个要素

我有一个D3项目下面的代码：On Click事件看似没有在整个要素

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

}

当我移动光标到文本刷新交互性似乎并没有跨越整个单词 - 为什么这是？以及如何修改上述内容，以便所有文字都能触发该事件？

整个项目的一个活生生的例子是在这里：http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview

来源

2016-10-24 whytheq

我认为它是由于容器饼图是是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

来源

2016-10-24 09:55:37 thatOneGuy

这只是制定出了什么问题。我会改变你添加饼图和刷新按钮到SVG的顺序。 – thatOneGuy

ok - 目前刷新按钮是在一个单独的div - 可能需要将其移动到饼图使用的div的右上角？ – whytheq

取决于你是否希望它在SVG中。我建议只使用纯HTML按钮，这是最简单的方法。 – thatOneGuy

On Click事件看似没有在整个要素

回答

相关问题