ExtJS的可拖动面板d3js平移缩放不起作用

Question

@mbostock

我有一个可拖动面板ExtJS的，我已经包括了图形d3js，定制的拖放和增加了变焦功能。 在一个简单的html页面中一切正常，但在Extjs面板中，除了移动节点以外，还会激活pan，我不会禁用pan。

我在哪里错了？

这是ExtjsPanel：

Ext.namespace("libs"); 
CSP.prj.tresprj.trestest.libs.MainPanel = Ext.extend(Ext.Panel, { 
    initComponent : function(){ 
     this.addEvents({ 
      'afterrender': true 
      }); 
     Ext.apply(this,{title:'My Custom Panel2'}); 
     Ext.apply(this,{html:'<div id="content"><div id="buttonDiv"><p>Selezionare il test da effettuare</p></div><!--buttonDiv--><div id="svgContent"></div><!--svgContent--></div><!--content-->'}); 

     this.addListener('afterrender',function(){ 

      Xxx.createButton("buttonDiv"); 
     }); 
     libs.MainPanel.superclass.initComponent.call(this); 
    } 
}); 

，这是图形代码：

var initSvg = function (target) { 
    //Activate context menu on right click 
    d3.select("body").attr("oncontextmenu", "return true"); 
    //Create SVG element 
    if (jQuery(target + " svg").length) { 
     clearSvgDiv(); 
    } 
    var svg = d3.select(target) 
      .append("svg") 
      .attr("width", width) 
      .attr("height", heigth) 
      .attr("id", "drawSvg") 
      .attr('preserveAspectRatio', 'xMinYMin slice') 
      .append('g'); 
    return svg; 
}; 
var clearSvgDiv = function() { 
    d3.select("svg") 
     .remove(); 
}; 
// Init force layout 
var initLayout = function (svg) { 
    svg.append('svg:rect') 
      .attr('width', width) 
      .attr('height', heigth) 
      .attr('fill', 'white'); 
    force = d3.layout.force() 
       .nodes(graph.getNodes()) 
       .links(graph.getEdges()) 
       .size([width, heigth]) 
       .linkDistance([50])  
       .charge([-300])  
       .start(); 
}; 
// Creates nodes and edge to draw them on the page, calculated positions and repulsions. 
var createNodesEdges = function (svg) { 
    var x = d3.scale.linear() 
     .domain([0, width]) 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .domain([0, heigth]) 
     .range([heigth, 0]); 

    svg.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", rescale)); 

    var path = svg.append("svg:g").selectAll("path") 
     .data(graph.getEdges()) 
     .enter() 
     .insert("svg:path") 
     .attr("class", "line") 
     .style("stroke", "#ccc"); 

    var node_drag = d3.behavior.drag() 
     .on("dragstart", dragstart) 
     .on("drag", dragmove) 
     .on("dragend", dragend); 

    var nodes = svg.selectAll("circle") 
     .data(graph.getNodes(), function (d) { return d.id; }) 
     .enter() 
     .append("circle") 
     .attr("id", function (d) { return d.id; }) 
     .attr("r", 5) 
     .call(node_drag); 

    force.on("tick", tick); 

    function tick() { 
     path.attr("d", function (d) { 
      var coordinatesP = findEdgeControlPoints(d); 
      return "M" + d.source.x + "," + d.source.y + "S" + coordinatesP.xp + "," + coordinatesP.yp + " " + d.target.x + "," + d.target.y; 
     }); 
     nodes.attr("cx", function (d) { return d.x; }) 
       .attr("cy", function (d) { return d.y; }); 
    } 
    function dragstart(d, i) { 
     force.stop(); // stops the force auto positioning before you start dragging 
    } 

    function dragmove(d, i) { 
     d.px += d3.event.dx; 
     d.py += d3.event.dy; 
     d.x += d3.event.dx; 
     d.y += d3.event.dy; 
     tick(); 
    } 

    function dragend(d, i) { 
     d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff 
     tick(); 
     force.resume(); 
    } 
}; 
var rescale = function() { 
     var trans = d3.event.translate; 
     var scale = d3.event.scale; 
     svg.attr("transform","translate(" + trans + ")" + " scale(" + scale + ")"); 
    }; 

Answer 1

我已经找到了问题，是不是ExtJS的，但精缩通过http://d3js.org/下载d3js库版本，扩展版我没有问题。