Javascript 饼图单击问题-单击未检测到
我一直在尝试创建一个图表来显示世界不同地区发生的事件。因此,我基本上选择了两种图形的组合:1)d3 google graph()通过map显示区域,jquery flot pie charts()映射事件。我将所有相应的经度值存储在一个数组中,并在这些值的基础上添加地图上的标记。因此,基本上我将在Javascript 饼图单击问题-单击未检测到,javascript,jquery,google-maps-api-3,d3.js,flot,Javascript,Jquery,Google Maps Api 3,D3.js,Flot,我一直在尝试创建一个图表来显示世界不同地区发生的事件。因此,我基本上选择了两种图形的组合:1)d3 google graph()通过map显示区域,jquery flot pie charts()映射事件。我将所有相应的经度值存储在一个数组中,并在这些值的基础上添加地图上的标记。因此,基本上我将在的帮助下在相应的标记上创建一个xhtml:div空间,一旦创建了这些div,我将为每个对应的div元素添加饼图。因此,图形创建成功,饼图的“plotclick”功能可以捕捉到饼图上的点击。没有在所有饼图
的帮助下在相应的标记上创建一个xhtml:div
空间,一旦创建了这些div,我将为每个对应的div元素添加饼图。因此,图形创建成功,饼图的“plotclick”功能可以捕捉到饼图上的点击。没有在所有饼图上检测到该单击功能。在大多数饼图中,单击切片会调用相应的单击函数。悬停也一样
这个问题只存在于firefox和Im中,使用的是最新版本的firefox,即22.0。这张图在铬合金上很好用
我添加了一个图表截图。
这是一个已知的问题,还是与创建图形的方法有关
// EDIT : (Code Added)
//google map api options
var map = new google.maps.Map(d3.select("#mapsss").node(), {
zoom: 2,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: false,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
streetViewControl: false,
center: new google.maps.LatLng(37.76487, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create an overlay.
var overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function () {
layer = d3.select(this.getPanes().overlayMouseTarget)
.append("div")
.attr("class", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlay.draw = function () {
projection = this.getProjection(),
padding = 10;
//mapData hasinput details
var marker = layer.selectAll("svg")
.data(d3.entries(mapData))
.each(transform) // update existing markers
.enter().append("svg:svg")
.each(transform)
.attr("class", "marker").attr("id", function (d) {
return "marker_" + d.key;
});
//creating canvas for pie chart
marker.append('foreignObject')
.attr('width', '100%')
.attr('height', '100%').style("background-color", "#000000").append('xhtml:div').attr("class", "pieCanvas").attr("id", function (d) {
return "canvas_" + d.key.split(" ").join("_");
}).style('height', '50px').style('width', '50px');
//creating pie chart on each canvas.. key holds the name of each canvas
$.plot($("#canvas_" + key.split(" ").join("_")), pieChartData[key], {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.3,
tilt: 0.5,
label: false,
stroke: {
color: '#ffffff',
width: 2.0
}
},
},
grid: {
hoverable: true,
clickable: true
},
legend: {
show: false
}
});
}
//click function
$(document).on("plotclick", "div.pieCanvas", pieChartClick);
我不喜欢太多的情节。在我的开发中,浏览器之间多次出现不兼容,我发现最好的选择是使用另一个库,我使用 与多个浏览器的兼容性更好,IE 6
在官方论坛上,这篇文章中有一些未回答的问题。我可以想出两个原因,让点击事件不被浏览器注册 1-事件未正确绑定 2-点击目标位于一个不可见层下方,防止浏览器听到点击。一些浏览器已经原谅了这一点,Firefox似乎在很多方面都相当严格
您可以使用web开发工具中的FF 3D视图来查看饼图上是否呈现了一个层。您可以尝试更改饼图的z-index,以缓解这种情况。我真的不明白为什么要使用两个不同的图形库?D3使用svg元素,flot使用canvas元素。使用d3进行交互要容易得多,因为d3将svg元素附加到DOM。然后可以将所有事件直接绑定到这些元素(请参见)
还有一个用d3制作饼图的例子。您使用的是什么版本的Flot?您链接到iola.dk上的旧示例页面;您是否尝试过www.flotcharts.org上的新版本?顺便说一句,视觉效果不错!谢谢@DNS!!我正在使用最新的flot-0.8.1,这是我从flotwebsite本身获得的。.你的代码是什么样子的?如果没有看到一个最简单的例子来说明它目前是如何工作的,那么很难回答这个问题。@geocodezip我已经添加了一个示例代码来解释这个问题。。