点击事件似乎没有超过整个元素

时间:2016-10-24 09:44:24

标签: javascript d3.js

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

}

当我将光标移动到文本刷新时,交互性似乎没有跨越整个单词 - 为什么会这样?以及如何修改上述内容以便所有文本都能触发事件?

整个项目的实例如下:http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview

1 个答案:

答案 0 :(得分:1)

我认为由于饼图所在的容器位于“刷新”按钮的顶部。我已将“刷新”按钮添加到正文中,似乎可以解决问题:

 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