D3 Zoom 和 Ionic 弹出框答案

【问题标题】：D3 Zoom and Ionic popoverD3 Zoom 和 Ionic 弹出框
【发布时间】：2014-10-01 23:22:34
【问题描述】：

我有一个使用 D3 可视化数据的 Cordova/Ionic 应用程序。

我使用 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 平移之外的组件的单击和等待事件侦听器上添加离子弹出框功能，例如：

    <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 缩放事件处理程序和单击/按住事件处理程序？

【问题讨论】：

标签： javascript svg d3.js ionic-framework

【解决方案1】：

是的。该事件可能正在触发，但是您的 D3 代码和 Ionic 代码具有不同的范围，并且 Ionic 中的 openPopover 从 SVG 节点不可见，因此没有任何反应。

有关如何重用 D3 中的事件处理程序代码的提示，请参阅 How to share scope between functions in d3.js?。

【讨论】：