Javascript D3变焦和离子流行音乐
我有一个Cordova/Ionic应用程序,它使用D3可视化数据 我使用D3缩放功能左右平移数据Javascript D3变焦和离子流行音乐,javascript,svg,d3.js,ionic-framework,Javascript,Svg,D3.js,Ionic Framework,我有一个Cordova/Ionic应用程序,它使用D3可视化数据 我使用D3缩放功能左右平移数据 var zoomListener = d3.behavior.zoom() .scaleExtent([1, 1]) .x(xScale) .on("zoom", function() { ... ... }); var svg = d3.select("#ani
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 popover功能的点击和保持事件侦听器,而不会出现以下问题:
<h1 on-hold="openPopover($event)">Open Popover</h1>
是否可以同时附加D3缩放事件处理程序和单击/保持事件处理程序?是的。事件可能正在触发,但是您的D3代码和Ionic代码具有不同的作用域,并且Ionic中的openPopover在SVG节点中不可见,因此不会发生任何事情 有关如何重用D3中事件处理程序代码的提示,请参阅
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");