我一直试图创建一个图表来显示世界不同地区发生的事件。所以我基本上选择了两个图形1)d3谷歌图形(http://bl.ocks.org/mbostock/899711)的组合,通过地图和jquery flot饼图(http://people.iola.dk/olau/flot/examples/pie.html)显示区域来映射事件。我已将所有相应的lattiti经度值存储到数组中,并且基于这些值附加地图上的标记。所以基本上我会在xhtml:div
的帮助下在相应的标记上创建一个<foriegnobject>
空间,一旦创建了这些div,我将为每个相应的div元素添加饼图。所以图形创建成功,饼图的“plotclick”功能,以捕捉饼图上的点击。在所有饼图上都没有检测到该点击功能。在大多数饼图中,单击切片,调用相应的单击功能。它同样也适用于悬停。
问题仅出在firefox和我使用最新版本的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);
答案 0 :(得分:1)
答案 1 :(得分:1)
我可以想到浏览器无法注册点击事件的两个原因。
1 - 事件没有正确绑定
2 - 点击目标位于不可见图层下方,防止浏览器听到咔嗒声。有些浏览器对此很宽容,Firefox似乎在很多方面都相当严格。
您可以使用Web开发工具中的FF 3D视图查看是否在饼图上呈现了图层。您可以尝试更改饼图的 z-index 以缓解此问题。
答案 2 :(得分:1)
老实说,我不明白为什么要使用两个不同的图形库? D3与svg元素一起使用,flot与canvas元素一起使用。使用d3进行交互是很容易的,因为d3将svg元素附加到DOM。然后,您可以将所有事件直接绑定到这些元素(请参阅https://github.com/mbostock/d3/wiki/Selections#wiki-on)。
此外,here是使用d3制作饼图的示例。