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

}

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

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

Answer 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

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

1 个答案: