javascript - d3.js - 强制模拟拖动不随鼠标移动
问题描述
此示例模拟看起来不错,但拖动不起作用!
test()
function test() {
var data1 ={
"nodes": [
{"id": "A"},
{"id": "B"},
{"id": "C"},
{"id":"D"}],
"links": [
{"source": "A", "target": "B"},
{"source": "B", "target": "C"},
{"source": "C", "target": "A"},
{"source": "D", "target": "A"}]}
var height = 250; var width = 400;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.style('border','1px solid red')
var simulation1 = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 3, height / 2));
var link1 = svg.append("g")
.selectAll("line")
.data(data1.links)
.enter().append("line")
.attr("stroke","black");
var node1 = svg.append("g")
.selectAll("circle")
.data(data1.nodes)
.enter().append("circle")
.attr("r", 10)
.call(d3.drag()
.on("drag", dragged1)
.on("end", dragended1))
.attr("fill","crimson");
simulation1.nodes(data1.nodes)
.on("tick", ticked1)
.alphaDecay(0)
.force("link")
.links(data1.links);
function ticked1() {
link1
.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; });
node1
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
function dragged1(d,event) {
d.fx = event.x;
d.fy = event.y;
}
function dragended1(d) {
d.fx = null;
d.fy = null;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
解决方案
dragged1
并且dragended1
应该event
作为第一个论点。
test()
function test() {
var data1 ={
"nodes": [
{"id": "A"},
{"id": "B"},
{"id": "C"},
{"id":"D"}],
"links": [
{"source": "A", "target": "B"},
{"source": "B", "target": "C"},
{"source": "C", "target": "A"},
{"source": "D", "target": "A"}]}
var height = 250; var width = 400;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.style('border','1px solid red')
var simulation1 = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 3, height / 2));
var link1 = svg.append("g")
.selectAll("line")
.data(data1.links)
.enter().append("line")
.attr("stroke","black");
var node1 = svg.append("g")
.selectAll("circle")
.data(data1.nodes)
.enter().append("circle")
.attr("r", 10)
.call(d3.drag()
.on("drag", dragged1)
.on("end", dragended1))
.attr("fill","crimson");
simulation1.nodes(data1.nodes)
.on("tick", ticked1)
.alphaDecay(0)
.force("link")
.links(data1.links);
function ticked1() {
link1
.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; });
node1
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
function dragged1(event,d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended1(event, d) {
d.fx = null;
d.fy = null;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
推荐阅读
- python - 编译 Cython 扩展后 Python traceback.format_tb 不能完全工作
- python - Python:嵌套类与继承
- php - Symfony 4 - 使用数组创建表单
- javascript - Nuxt.js:如何在 nuxt 构建后调试服务器端(记录一些信息)
- android - OkHttp 和 Retrofit 无限 Post 请求在后台
- python-3.x - 检查某些文本的 message.content
- python - python转php接口
- python - 在 Jupyter Lab 中使用 hvplot、Holoviews 和 Bokeh 掌握细节图?
- html - 在 Angular 2 中显示列表的内容?
- php - PHP Easy Coding Standard (ECS) - 抑制 phpcs 警告