我一直在尝试创建一个图表来显示世界不同地区发生的事件.所以我基本上去了两个图1)d3谷歌图(
http://bl.ocks.org/mbostock/899711)的组合,通过地图和jquery flot饼图(
http://people.iola.dk/olau/flot/examples/pie.html)显示区域来映射事件.我已将所有相应的lattiti经度值存储到数组中,并且在这些值的基础上附加地图上的标记.所以基本上我会在< foriegnobject>的帮助下在相应的标记上创建一个xhtml:div空间.一旦创建了这些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);