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