Javascript d3.js：使用“缩放”和“强制布局”时禁用拖动

我看到这个问题：

但是我从我的图表中得到了一些意想不到的行为——在几次拖动、缩放或平移之后，所有节点都冻结并停止拖动

我创作了这把小提琴：

我们需要代码，这里是主要部分：

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:似乎冻结发生在一段时间后。

您必须将拖动变量设置为函数，并将d3.behavior.drag更改为force.drag:

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

我更新了你的小提琴

使用JSFIDLE:

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

var节点；
var链接；
prepareData（）；
var-graph=document.queryselectoral（#graph”）[0]；
var高度=500；
var宽度=500；
var svg=d3.选择（#图形”）.追加（“svg:svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“指针事件”、“全部”）
.append（“svg:g”）
.call（d3.behavior.zoom（）.on（“zoom”，zoom））
.append（“svg:g”）；
append（“svg:rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“填充”、“白色”）；
var link=svg.selectAll（“.link”）；
var node=svg.selectAll（“.node”）；
var-force=d3.layout.force（）
.节点（节点）
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（100）
。收费（-400）
.start（）；
var drag=force.drag（）
.origin（函数（d）{return d；}）
.on（“dragstart”，dragstart）
.打开（“拖动”，拖动）
node=svg.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（拖动）；
node.append（“圆”）
.attr（“类”、“节点圆”）
.attr（“r”，12）；
node.append（“文本”）
.attr（“x”，12）
.attr（“y”，“.35em”）
.text（函数（d）{return d.word；}）；
link=svg.selectAll（“.link”）
.数据（链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
});
函数zoom（）{
attr（“transform”、“translate”（+d3.event.translate+））比例（+d3.event.scale+）；
}
函数dragstarted（d）{
d3.event.sourceEvent.stopPropagation（）；
}
函数（d）{
d3.选择（this）.attr（“x”，d.x=d3.event.x）.attr（“y”，d.y=d3.event.y）；
}
函数prepareData（）{
节点=[{“索引”：0，“单词”：“编辑”}，{“索引”：1，“单词”：“课程”，“句子”：[29859]}，{“索引”：2，“单词”：“需要”，“句子”：[29859]}，{“索引”：3，“单词”：“适合”，“句子”：[29859]}，{“索引”：4，“单词”：“幻灯片”，“句子”：[29859]}，{“索引”：5，“单词”：“打印”，“句子”：[29859]}，{“索引”：6，“单词”：“可以”，“句子”：[29859]}；
链接=[{“源”：0，“目标”：1}，{“源”：0，“目标”：2}，{“源”：0，“目标”：3}，{“源”：0，“目标”：4}，{“源”：0，“目标”：5}，{“源”：0，“目标”：6}]
}

svg{
边框：1px纯黑；
}
.链接{
行程：#000；
笔画宽度：1px；
}
.节点圆{
光标：移动；
填充：#ccc；
行程：#000；
笔画宽度：2px；
}

刚要说的是，问题不在于你的缩放，你仍然可以拖动图形（通过边而不是节点拖动）。但是你不能拖拉节点，让它工作吧。下面的答案：）注意：没有拖动的

函数及其用法，它就可以正常工作。这里的关键是拖动的
stopPropagation（）
，因此
zoom
不会试图处理它来进行平移（因为
指针事件=all
）。