我有一个 Cordova/Ionic 应用程序,它使用 D3 来可视化数据。
我使用 D3 缩放功能左右平移数据
var zoomListener = d3.behavior.zoom()
.scaleExtent([1, 1])
.x(xScale)
.on("zoom", function() {
...
...
});
var svg = d3.select("#animation-container")
.append("svg")
.attr("id", "ecogram")
.attr("width", options.width)
.attr("height", options.height)
.call(zoomListener)
.append("g")
.attr("transform", "translate(" + options.margin.left + "," + options.margin.top + ")");
我可以在单击和保持事件监听器上向 SVG 平移之外的组件添加 ionic 弹出框功能,没有任何问题,例如:
<h1 on-hold="openPopover($event)">Open Popover</h1>
但是当我使用 D3 将它们添加到 SVG(如下面的代码)时,事件不会触发。
xAxisGroup = svg.append("g")
.attr("class", "x axis");
xAxisGroup
.append('svg:use')
.attr("x", options.startPinX)
.attr("y", options.startPinY)
.attr("width", options.iconWidth)
.attr("height", options.iconHeight * 1.3)
.attr("class", "ticker start-pin")
.attr("on-hold", "openPopover($event)")
.attr("xlink:href", "img/icons.svg#icon-pin");
是否可以同时附加 D3 缩放事件处理程序和单击/保持事件处理程序?
最佳答案
是的。该事件可能正在触发,但您的 D3 代码和 Ionic 代码具有不同的范围,并且 Ionic 中的 openPopover 从 SVG 节点中不可见,因此什么也没有发生。
参见How to share scope between functions in d3.js?有关如何重用 D3 中的事件处理程序代码的提示。
关于javascript - D3 Zoom 和 Ionic 弹出框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26152219/