禁用SVG拖动

时间:2015-04-08 07:40:45

标签: javascript svg d3.js

我想在此SVG元素上禁用拖放操作,但多次尝试失败,

/// Define drag beavior
var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
    // if the event.x goes over a boundry, trigger "dragend"
    if(d3.event.x > 200){
        //drag.dragend(); 
        drag.trigger("dragend");
    }

  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

svgContainer.call(drag);

JSFiddle - http://jsfiddle.net/nhe613kt/76/

我想在我的图表或矩阵上禁用拖动,你可以说,我想要它固定和缩放。

我正在关注这个jsfiddle - http://jsfiddle.net/typeofgraphic/Ne8h2/4/,但它没有任何方法

drag.dragend();   //drag.trigger(" dragend&#34);

抛出异常 - 未捕获TypeError:undefined不是函数

1 个答案:

答案 0 :(得分:0)

我已经修复了拖拽功能。你有两个缩放变量,第一个叫做zoomed,它也是一个变量,但是在它被调用之后才被声明,这是不行的。一旦制作了SVG,也称为缩放变量。在你制作SVG之后附加一个'g'元素,然后调用你的缩放,你的缩放比例被放在SVG里面的'g'元素而不是实际的SVG上时,你很紧张。

JSFiddle更新:http://jsfiddle.net/nhe613kt/90/

var svgContainer = d3.select("body").append("svg")
           .call(zoom) //called earlier
           .attr("width", width)
           .attr("height", height)
           .style("background-color", "black")
           .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.right + ")");

如评论中所述,最终目标是什么?你怎么想禁用你的拖拽?您是否希望单独拖动每个矩形?如果是这样的话,你将不得不在每个单独的矩形上调用拖动:)告诉我你还想要它做什么,并且生病了:)