d3js拖动右键答案

【问题标题】：d3js drag right buttond3js拖动右键
【发布时间】：2016-01-18 16:28:40
【问题描述】：

我正在用画布构建十六进制地图。我必须用鼠标右键 btn 绘制一些细节。我使用 d3js 来缩放和移动画布。问题是我不能用右键正确绘制。

我已经创建了简单的示例来说明问题所在。

    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <div id="map_canvas">
        <canvas></canvas>
    </div>
<script>
var width = $('#map_canvas').width(),
    height = 700;
var ctx;

function zooms() {
    if(d3.event.sourceEvent.button !== 0) {
        return
    }else {

        ofsetx = d3.event.translate[0];
        ofsety = d3.event.translate[1];
        scale = d3.event.scale;
        ctx.save();
        ctx.clearRect(0, 0, width, height);
        ctx.translate(d3.event.translate[0], d3.event.translate[1]);
        ctx.scale(d3.event.scale, d3.event.scale);
        draw()
        ctx.restore();
    }
}

function draw() {
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
}

var zoom = d3.behavior.zoom()
    .scaleExtent([-2, 10])
    .on("zoom", zooms)

$(function() {
    ctx = d3.select("canvas")
    .attr("width", width)
    .attr("height", height)
    .attr("ofsetx", 0)
    .attr("ofsety", 0)
    .call(zoom)
    .on("dblclick.zoom", null)
    .on("contextmenu", function (d, i) {
        d3.event.preventDefault();
    })
    .node().getContext("2d");
    draw();
});
</script>

尝试用右键拖动画布。
之后试着用左边的拖一点。

你会看到，第一次拖动成功但没有绘制。

我不想按右键进行任何移动、缩放等操作。请帮忙

【问题讨论】：

标签： canvas d3.js drag-and-drop mouseevent

【解决方案1】：

检查mousedown 并在按钮错误时终止缩放/平移：

<script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <div id="map_canvas">
        <canvas></canvas>
    </div>
<script>
var width = $('#map_canvas').width(),
    height = 700;
var ctx;

function zooms() {
    ofsetx = d3.event.translate[0];
    ofsety = d3.event.translate[1];
    scale = d3.event.scale;
    ctx.save();
    ctx.clearRect(0, 0, width, height);
    ctx.translate(d3.event.translate[0], d3.event.translate[1]);
    ctx.scale(d3.event.scale, d3.event.scale);
    draw()
     ctx.restore();
}

function draw() {
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
}

var zoom = d3.behavior.zoom()
    .scaleExtent([-2, 10])
    .on("zoom", zooms)

$(function() {
    ctx = d3.select("canvas")
    .attr("width", width)
    .attr("height", height)
    .attr("ofsetx", 0)
    .attr("ofsety", 0)
    .on("mousedown", function(){
      if (d3.event.button !== 0){
        d3.event.stopImmediatePropagation();
      }
    })
    .call(zoom)
    .on("dblclick.zoom", null)
    .on("contextmenu", function (d, i) {
        d3.event.preventDefault();
    })
    .node().getContext("2d");
    draw();
});
</script>

【讨论】：