使用D3.js创建的Aster图表无法触发contextmenu事件

时间:2016-01-20 08:43:33

标签: google-maps d3.js svg leaflet markerclusterer

要求:要在Leaflet(Google地图)中创建标记和标记群集的标记图标的星号图表。 aster图表应该能够在右键单击时调用上下文菜单。

我尝试附加' contextmenu'在创建紫苑图表的过程中,它会起作用。所以我听了' contextmenu' selectAll上的事件(' g.arc')。活动' contextmenu'正在触发某些标记图标,但不会触发所有图标。

   /** Create an svg element */
    var svg = document.createElementNS(d3.ns.prefix.svg, 'svg');
    svg.setAttribute('width', w);
    svg.setAttribute('height', h);

    /** Create the pie chart */
    var vis = d3.select(svg)
    //.append('svg')
    .data([data])
    .attr('id', function(d, i) {
        return 'geo-' + d[0].latLng.lat + '-' + d[0].latLng.lng;
    })
    .attr('class', pieClass)
    .attr('width', w)
    .attr('height', h)
    .on("contextmenu", function(data, index) {
      contextMenu(this, 'circle', data, index, circles);
      d3.event.preventDefault();
    });

    var arcs = vis.selectAll('g.arc')
    .data(donut.value(valueFunc))
    .enter().append('svg:g')
    .attr('class', 'arc')
    .attr('transform',
          'translate(' + origo + ',' + origo + ')');

    // White background for segments
    arcs.append('path')
    .attr('fill', 'white')
    .attr('stroke', 'gray')
    .attr('stroke-width', strokeWidth)
    .attr('d', outlineArc)
    .append('svg:title');

...... ...... ....

      d3.selectAll('g.arc').on('contextmenu', function() {
           console.log('Context menu triggered');
      });

 return vm.serializeXmlNode(svg);

我正在序列化svg元素。它是否会延迟事件的调用?

请建议。

0 个答案:

没有答案