饼图点击问题
我一直试图创建一个图表来显示在世界不同地区发生的事件。 所以我基本上结合了两个图1）d3谷歌图（http://bl.ocks.org/mbostock/899711）通过地图和jquery flot饼图来显示区域（http：//people.iola。 dk / olau / flot / examples / pie.html）来映射事件。 我将所有对应的经纬度值存储在一个数组中，并在这些值的基础上附加地图上的标记。 所以基本上我会在<foriegnobject>的帮助下在相应标记上创建一个xhtml:div空间，一旦创建了这些div，我将为每个相应的div元素添加饼图。 因此图表创建成功，饼图的“plotclick”功能捕捉饼图上的点击。 该点击功能未在所有饼图上检测到。 在大多数饼图中，单击切片，调用相应的点击功能。 它的悬停也一样。
这个问题只在Firefox和Im使用最新版本的Firefox是22.0。 该图在Chrome中正常工作..
我添加了一张图表的截图。 这是一个已知的问题，还是它与图形创建的方法有关？
// 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);
我不喜欢太多情节。 在我的开发中浏览器之间多次不兼容，我发现最好的选择是使用另一个库，我使用jplot与多个浏览器的兼容性比较好，IE 6。
在官方论坛上，这个主题还有未解决的问题
我可以想到点击事件不会被浏览器注册的两个原因。
1 - 事件没有正确绑定
2 - 点击目标位于不可见图层下面，防止浏览器听到点击。 有些浏览器对此不以为然，Firefox似乎在很多方面都相当严格。
您可以使用Web开发工具中的FF 3D视图来查看是否有图层在您的饼图中呈现。 你可以尝试改变饼图的z-index来减轻这一点。
我真的不明白为什么你会使用两个不同的图形库？ D3适用于svg元素，flot使用canvas元素。 使用d3进行交互更容易，因为d3会将svg元素附加到DOM。 然后，您可以将所有事件直接绑定到这些元素（请参阅https://github.com/mbostock/d3/wiki/Selections#wiki-on）。
另外，这里是一个用d3制作饼图的例子。
链接地址: http://www.djcxy.com/p/14751.html