javascript – 饼图点击问题 – 点击未检测到

前端之家收集整理的这篇文章主要介绍了javascript – 饼图点击问题 – 点击未检测到前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试创建一个图表来显示世界不同地区发生的事件.所以我基本上去了两个图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中运行良好..

添加了图表的截图.
它是一个已知问题还是与图形创建方法有关?

  1. // EDIT : (Code Added)
  2.  
  3. //google map api options
  4. var map = new google.maps.Map(d3.select("#mapsss").node(),{
  5. zoom: 2,panControl: true,panControlOptions: {
  6. position: google.maps.ControlPosition.TOP_RIGHT
  7. },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
  8. });
  9.  
  10.  
  11.  
  12. //create an overlay.
  13. var overlay = new google.maps.OverlayView();
  14.  
  15. // Add the container when the overlay is added to the map.
  16. overlay.onAdd = function () {
  17. layer = d3.select(this.getPanes().overlayMouseTarget)
  18. .append("div")
  19. .attr("class","stations");
  20.  
  21. // Draw each marker as a separate SVG element.
  22. // We could use a single SVG,but what size would it have?
  23. overlay.draw = function () {
  24. projection = this.getProjection(),padding = 10;
  25.  
  26. //mapData hasinput details
  27. var marker = layer.selectAll("svg")
  28. .data(d3.entries(mapData))
  29. .each(transform) // update existing markers
  30. .enter().append("svg:svg")
  31. .each(transform)
  32. .attr("class","marker").attr("id",function (d) {
  33. return "marker_" + d.key;
  34. });
  35. //creating canvas for pie chart
  36. marker.append('foreignObject')
  37. .attr('width','100%')
  38. .attr('height','100%').style("background-color","#000000").append('xhtml:div').attr("class","pieCanvas").attr("id",function (d) {
  39. return "canvas_" + d.key.split(" ").join("_");
  40. }).style('height','50px').style('width','50px');
  41.  
  42. //creating pie chart on each canvas.. key holds the name of each canvas
  43. $.plot($("#canvas_" + key.split(" ").join("_")),pieChartData[key],{
  44. series: {
  45. pie: {
  46. show: true,radius: 1,innerRadius: 0.3,tilt: 0.5,label: false,stroke: {
  47. color: '#ffffff',width: 2.0
  48. }
  49. },},grid: {
  50. hoverable: true,clickable: true
  51. },legend: {
  52. show: false
  53. }
  54. });
  55. }
  56.  
  57.  
  58. //click function
  59. $(document).on("plotclick","div.pieCanvas",pieChartClick);

解决方法

我不喜欢剧情.在我的开发中,浏览器之间反复不兼容,我找到的最佳选择是使用另一个库,我使用 jplot
与多种浏览器的兼容性更好,IE 6.

在官方论坛上,这个topic有一些未解答的问题

猜你在找的JavaScript相关文章