Javascript d3.js-力模拟拖动不随鼠标移动
此示例模拟看起来不错,但拖动不起作用Javascript d3.js-力模拟拖动不随鼠标移动,javascript,svg,d3.js,Javascript,Svg,D3.js,此示例模拟看起来不错,但拖动不起作用 test() 功能测试(){ var data1={ “节点”:[ {“id”:“A”}, {“id”:“B”}, {“id”:“C”}, {“id”:“D”}], “链接”:[ {“源”:“A”,“目标”:“B”}, {“源”:“B”,“目标”:“C”}, {“源”:“C”,“目标”:“A”}, {“源”:“D”,“目标”:“A”}]} 变量高度=250;变量宽度=400; var svg=d3.选择(“正文”).追加(“svg”) .attr(“宽度”
test()
功能测试(){
var data1={
“节点”:[
{“id”:“A”},
{“id”:“B”},
{“id”:“C”},
{“id”:“D”}],
“链接”:[
{“源”:“A”,“目标”:“B”},
{“源”:“B”,“目标”:“C”},
{“源”:“C”,“目标”:“A”},
{“源”:“D”,“目标”:“A”}]}
变量高度=250;变量宽度=400;
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度)
.style('边框','1px实心红色')
var simulation1=d3.forceSimulation()
.force(“link”,d3.forceLink().id(函数(d){return d.id;}).distance(50))
.force(“电荷”,d3.forceManyBody())
.力(“中心”,d3.力中心(宽度/3,高度/2));
var link1=svg.append(“g”)
.selectAll(“行”)
.数据(数据1.链接)
.enter().append(“行”)
.attr(“笔划”、“黑色”);
var node1=svg.append(“g”)
.selectAll(“圆圈”)
.数据(数据1.节点)
.enter().append(“圆”)
.attr(“r”,10)
.call(d3.drag()
.打开(“拖动”,拖动1)
.on(“结束”,绘图1))
.attr(“填充”、“深红色”);
模拟1.节点(数据1.节点)
。在(“勾选”,勾选1)
.字母衰减(0)
.force(“链接”)
.链接(数据1.链接);
函数1(){
链接1
.attr(“x1”,函数(d){返回d.source.x;})
.attr(“y1”,函数(d){返回d.source.y;})
.attr(“x2”,函数(d){返回d.target.x;})
.attr(“y2”,函数(d){返回d.target.y;});
节点1
.attr(“cx”,函数(d){return d.x;})
.attr(“cy”,函数(d){返回d.y;});
}
函数dragged1(d,事件){
d、 fx=事件x;
d、 fy=事件y;
}
函数dragended1(d){
d、 fx=null;
d、 fy=null;
}
}
dragged1
和draggend1
应将事件
作为第一个参数
test()
功能测试(){
var data1={
“节点”:[
{“id”:“A”},
{“id”:“B”},
{“id”:“C”},
{“id”:“D”}],
“链接”:[
{“源”:“A”,“目标”:“B”},
{“源”:“B”,“目标”:“C”},
{“源”:“C”,“目标”:“A”},
{“源”:“D”,“目标”:“A”}]}
变量高度=250;变量宽度=400;
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度)
.style('边框','1px实心红色')
var simulation1=d3.forceSimulation()
.force(“link”,d3.forceLink().id(函数(d){return d.id;}).distance(50))
.force(“电荷”,d3.forceManyBody())
.力(“中心”,d3.力中心(宽度/3,高度/2));
var link1=svg.append(“g”)
.selectAll(“行”)
.数据(数据1.链接)
.enter().append(“行”)
.attr(“笔划”、“黑色”);
var node1=svg.append(“g”)
.selectAll(“圆圈”)
.数据(数据1.节点)
.enter().append(“圆”)
.attr(“r”,10)
.call(d3.drag()
.打开(“拖动”,拖动1)
.on(“结束”,绘图1))
.attr(“填充”、“深红色”);
模拟1.节点(数据1.节点)
。在(“勾选”,勾选1)
.字母衰减(0)
.force(“链接”)
.链接(数据1.链接);
函数1(){
链接1
.attr(“x1”,函数(d){返回d.source.x;})
.attr(“y1”,函数(d){返回d.source.y;})
.attr(“x2”,函数(d){返回d.target.x;})
.attr(“y2”,函数(d){返回d.target.y;});
节点1
.attr(“cx”,函数(d){return d.x;})
.attr(“cy”,函数(d){返回d.y;});
}
函数dragged1(事件,d){
d、 fx=事件x;
d、 fy=事件y;
}
函数dragended1(事件,d){
d、 fx=null;
d、 fy=null;
}
}