7

ここに画像の説明を入力世界のさまざまな地域で発生したイベントを表示するグラフを作成しようとしています。だから私は基本的に2つのグラフの組み合わせに行きましたdk/olau/flot/examples/pie.html ) を参照して、イベントをマップします。対応するすべての緯度経度値を配列に保存し、これらの値に基づいてマップ上のマーカーを追加しました。したがって、基本的にはxhtml:div、対応するマーカーにスペースを作成します<foriegnobject>これらの div が作成されたら、対応する div 要素ごとに円グラフを追加します。グラフの作成が成功したので、円グラフの「plotclick」関数で、円グラフのクリックをキャッチします。そのクリック機能は、すべての円グラフで検出されません。ほとんどの円グラフでは、スライスをクリックすると、対応するクリック関数が呼び出されます。ホバリングも同様です。

この問題は 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);
4

3 に答える 3

1

ブラウザがクリック イベントを登録しない理由は 2 つあります。

1 - イベントが正しくバインドされませんでした

2 - クリック ターゲットが非表示レイヤーの下にあるため、クリックがブラウザに聞こえません。一部のブラウザーはこれを許容していますが、Firefox は多くの点でかなり厳格なようです。

Web 開発ツールの FF 3D ビューを使用して、円グラフ上にレイヤーがレンダリングされているかどうかを確認できます。これを軽減するには、円グラフのz-indexを変更してみてください。

于 2013-09-03T16:47:00.743 に答える
1

私は多くのプロットが嫌いです。私の開発では、ブラウザー間の非互換性が繰り返しありました。私が見つけた最良のオプションは、別のライブラリを使用することでした。複数のブラウザーとのjplot 互換性を使用すると、IE 6.

公式フォーラムでは、このトピックには未回答の質問があります

于 2013-07-24T15:40:06.667 に答える