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库的缩小版本，扩展版本我没问题。

extjs draggable面板d3js平移缩放不起作用

1 个答案: