gpt4 book ai didi

javascript - 强制布局 - 标记和固定节点

转载 作者:行者123 更新时间:2023-11-29 21:36:21 24 4
gpt4 key购买 nike

我正在基于 d3js 构建自己的力阻力。我正在学习很好的例子 site ,这几乎拥有我需要的一切:

我遇到了这个问题,恐怕我无法解决,因为我对 d3js 的了解不够。

我正在尝试结合两个功能:- 拖动节点,它们停留在我释放它们的位置- 所有节点上都有一个名称,所以当我拖动它们时,名称也在节点之后。

我遇到的问题是,加载图表后,它会正确显示节点及其各自的名称。但是当我拖动它们时,文本仍保留在屏幕上。

这是做标签的示例代码,完整的 jsfiddle 是 here :

做标签的代码示例:

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 8)
.style("fill", function (d) {
return color(d.group);
})
node.append("text")
.attr("dx", 10)
.attr("dy", ".35em")
.text(function(d) { return d.name })
.style("stroke", "gray");
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;
});

d3.selectAll("circle").attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});

d3.selectAll("text").attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
});

这是执行固定的示例代码,完整的 jsfiddle 是 here

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 8)
.style("fill", function (d) {
return color(d.group);
})
.on('dblclick', releasenode)
.call(node_drag);
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);

function dragstart(d, i) {
force.stop() //stop 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;
}

function dragend(d, i) {
d.fixed = true; //
force.resume();
}

function releasenode(d) {
d.fixed = false; //
//force.resume();
}

我所做的是将两个代码示例组合在一起。节点最初已正确呈现,但当我尝试拖动它以便将它们固定时,标签停留在其原始位置并且不会更新(不跟随节点)。这是我初始化这两个的地方:

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.style("fill", function (d) {
return color(d.group);
})
.call(force.drag) //-- HERE -- Take care of labels
.on('dblclick', connectedNodes) //Added code
.on('mouseover', tip.show) //Tool tip show
.on('mouseout', tip.hide) //Tool tip remove
//.on('click', navigateToPage)//Add event listener to open another Form
//.call(node_drag); //-- HERE --Drag Nodes to position

node.append("circle")
.attr("r", 8)
.style("fill", function (d) {

return color(d.group);
})

代码工作正常,如果我使用其中之一。但是当合并时,它的行为不正常。我怎样才能同时激活它们?如果有另一种固定节点的方法,那就太好了。

最佳答案

我认为这将是一个更好的解决方案:http://jsfiddle.net/bzas8j5z/

var dragstart = function(d) {
d.fixed = true;
};

var drag = force.drag().
on("dragstart", dragstart);

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

此处引用:https://gist.github.com/mbostock/3750558

关于javascript - 强制布局 - 标记和固定节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34744336/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com