D3js拖动与点击

Question

我正在使用节点的拖放功能对d3js树进行编码。 我遇到了这个示例http://jsfiddle.net/langdonx/fe5gn/ 。

var container,
    rect,
    dragBehavior,
    wasDragged = false;

container = d3.select('svg')
    .append('g');

rect = container.append('rect')
    .attr('width', 100)
    .attr('height', 100);

dragBehavior = d3.behavior.drag()
    .on('dragend', onDragStart)
    .on('drag', onDrag)
    .on('dragend', onDragEnd);

container
    .call(dragBehavior)
    .on('click', onClick);

function flashRect() {
    rect.attr('fill', 'red').transition().attr('fill', 'black');
}

function onDragStart() {
    console.log('onDragStart');
}

function onDrag() {
    console.log('onDrag');

    var x = (d3.event.sourceEvent.pageX - 50);

    container.attr('transform', 'translate(' + x + ')');

    wasDragged = true;
}

function onDragEnd() {
    if (wasDragged === true) {
        console.log('onDragEnd');

        // always do this on drag end
        flashRect();
    }

    wasDragged = false;
}

function onClick(d) {
    if (d3.event.defaultPrevented === false) {
        console.log('onClick');

        // only do this on click if we didn't just finish dragging
        flashRect();
    }
}

但是，此示例的行为方式与chrome和Firefox不同。 当我单击矩形时：

• Chrome输出：OnDrag，OnDragEnd，OnClick
• Firefox输出：OnClick

当我拖放矩形时：

• Chrome输出：OnDrag，OnDragEnd
• Firefox输出：OnDrag，OnDragEnd

单击时，有什么方法可以使chrome与Firefox具有相同的行为？

Answer 1

   container
       .call(dragBehavior)
       .on('click', onClick);

至

   container
       .on("mousedown", function() { 
                d3.event.stopPropagation();

                d3.select(this).on("mouseup", onClick);
                d3.select(this).on("mousemove",  function()
                {
                    d3.select(this).call(dragBehavior);
                });
            });