d3.js：使用带有强制布局的缩放时禁用拖动

Question

我已经看到了这个问题： 有没有办法放大D3力布局图？

但是我从我的图形中得到了一些意想不到的行为 - 在几次拖动或缩放或平移后所有节点都冻结并拖动停止工作。

我创造了这个小提琴： http ： //jsfiddle.net/7gpweae9/9/

所以要求代码，所以这里是主要部分：

var svg = d3.select("#graph")
    .append("svg:svg")
        .attr("width", width)
        .attr("height", height)
        .attr("pointer-event", "all")
    .append("svg:g")
        .call(d3.behavior.zoom().on("zoom", zoom))
    .append("svg:g");

svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr('fill', 'white');

var link = svg.selectAll(".link");
var node = svg.selectAll(".node");

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width,height])
    .linkDistance(100)
    .charge(-400)
    .start();

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(drag);

node.append("circle")
    .attr("class", "node-circle")
    .attr("r", 12);

node.append("text")
    .attr("x", 12)
    .attr("y", ".35em")
    .text(function(d) { return d.word; });

link = svg.selectAll(".link")
    .data(links)
    .enter().append("line")
    .attr("class", "link");

force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
});

function zoom() {
    svg.attr("transform",
        "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
    d3.select(this).classed("dragging", true);
}

function dragged(d) {
    d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}

function dragended(d) {
    d3.select(this).classed("dragging", false);
}

也许我错过了一些东西，我之前从未使用过d3。

UPD：似乎在一段时间后发生冻结。

Answer 1

我将d3.layout.force（）替换为force.drag（），现在它几乎可以正常工作。

  var nodes; var links; prepareData(); var graph = document.querySelectorAll("#graph")[0]; var height = 500; var width = 500; var svg = d3.select("#graph").append("svg:svg") .attr("width", width) .attr("height", height) .attr("pointer-event", "all") .append("svg:g") .call(d3.behavior.zoom().on("zoom", zoom)) .append("svg:g"); svg.append("svg:rect") .attr("width", width) .attr("height", height) .attr('fill', 'white'); var link = svg.selectAll(".link"); var node = svg.selectAll(".node"); var force = d3.layout.force() .nodes(nodes) .links(links) .size([width,height]) .linkDistance(100) .charge(-400) .start(); var drag = force.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .call(drag); node.append("circle") .attr("class", "node-circle") .attr("r", 12); node.append("text") .attr("x", 12) .attr("y", ".35em") .text(function(d) { return d.word; }); link = svg.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link"); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); }); function zoom() { svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); } function dragged(d) { d3.select(this).attr("x", dx = d3.event.x).attr("y", dy = d3.event.y); } function prepareData() { nodes = [{"index":0,"word":"edit"},{"index":1,"word":"course","sentences":[29859]},{"index":2,"word":"needs","sentences":[29859]},{"index":3,"word":"fit","sentences":[29859]},{"index":4,"word":"slides","sentences":[29859]},{"index":5,"word":"print","sentences":[29859]},{"index":6,"word":"can","sentences":[29859]}]; links = [{"source":0,"target":1},{"source":0,"target":2},{"source":0,"target":3},{"source":0,"target":4},{"source":0,"target":5},{"source":0,"target":6}] } 

 svg { border: 1px solid black; } .link { stroke: #000; stroke-width: 1px; } .node-circle { cursor: move; fill: #ccc; stroke: #000; stroke-width: 2px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body> <div id="graph"></div> </body> 

Answer 2

您必须将拖动变量设为函数并将d3.behaviour.drag更改为force.drag：

function drag(){
    return force.drag()
       // .origin(function(d) { return d; })
        .on("dragstart", dragstarted)
        .on("drag", dragged)
        .on("dragend", dragended);
}

我已经更新了你的小提琴

工作JSFIDDLE： http ： //jsfiddle.net/7gpweae9/15/