7

在此处输入图像描述我一直在尝试创建一个图表来显示世界不同地区发生的事件。所以我基本上选择了两个图表的组合 1) d3 谷歌图表 ( http://bl.ocks.org/mbostock/899711 ) 通过地图和 jquery flot 饼图 ( http://people.iola. dk/olau/flot/examples/pie.html）来映射事件。我已将所有相应的纬度经度值存储到一个数组中，并根据这些值附加地图上的标记。所以基本上我会xhtml:div在相应标记的帮助下创建一个空间<foriegnobject>一旦创建了这些 div，我将为每个对应的 div 元素添加饼图。所以图表创建成功，饼图的“plotclick”功能，捕捉饼图的点击。未在所有饼图中检测到该点击功能。在大多数饼图中，点击切片，会调用相应的点击函​​数。悬停也一样。

问题仅存在于 Firefox 中，我使用的是最新版本的 22.0 版 Firefox。该图在 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);
4

3 回答 3

1

老实说，我不明白您为什么要使用两个不同的图形库？D3 适用于 svg 元素，而 flot 适用于 canvas 元素。使用 d3 进行交互要容易得多，因为 d3 将 svg 元素附加到 DOM。然后，您可以将所有事件直接绑定到这些元素（请参阅https://github.com/mbostock/d3/wiki/Selections#wiki-on）。

另外，这里有一个使用 d3 制作饼图的示例。

于 2013-10-22T08:52:32.390 回答
1

我不喜欢很多情节。在我的开发中，浏览器之间反复出现不兼容，我发现最好的选择是使用另一个库，我使用jplot 与多个浏览器兼容更好，IE 6。

在官方论坛，这个话题有未回答的问题

于 2013-07-24T15:40:06.667 回答
1

我可以想到浏览器不注册点击事件的两个原因。

1 - 事件没有正确绑定

2 - 点击目标位于不可见层下方，防止浏览器听到点击。一些浏览器对此很宽容，Firefox 似乎在很多方面都相当严格。

您可以使用 Web 开发工具中的 FF 3D 视图来查看在您的饼图中是否有图层正在渲染。您可以尝试更改饼图的z-index来缓解这种情况。

于 2013-09-03T16:47:00.743 回答