当div用作d3力导向图中的节点时，动态调整div的大小 [英] Dynamically resize a div when it is used as a node in a d3 force-directed graph
问题描述
您好Stackoverflow社区！
Hi Stackoverflow Community!
所以我的问题如下:
我有一个d3力导向图.该图的节点为div. 现在，我希望能够使用鼠标来调整此div的大小.我为此目的使用了jqueryui resizable().
I have a d3 force-directed graph. The nodes of this graph are divs. Now i want to be able to resize this divs using the mouse. I use the jqueryui resizable() for this purpose.
不幸的是，它呈现了ui更改(当我到达节点的边缘时，我得到了用于调整大小的mousesymbol)，但是我无法调整它们的大小.我相信这是因为d3-forcegraph覆盖了jqueryui函数.我试图停止该图形，以便可以访问调整大小功能，但这似乎不起作用.
Unfortunately it renders the ui changes (when i reach the edges of the nodea i get the mousesymbol for resize) but i cannot resize them. I believe it is because the d3-forcegraph overlays the jqueryui function. I tried to stop the graph so that i can access the resize functionality but this seems not to work.
有人知道我如何调整这些div的大小吗? 我创建了一个小提琴来显示我的意思: https://jsfiddle.net/5jgrf5h8/
Does anybody have an idea how i could make these divs resizable? I created a fiddle to show what i mean: https://jsfiddle.net/5jgrf5h8/
//constants for the network visualisation
var height = window.innerHeight-20; //fullsize svg
var width = window.innerWidth-20;
var nodes = [
{"id": "RootNode", "group": 0},
{"id": "Node1",
"ip_adresses": [
{"ip_adress": "aa.bbb.114.80/28"}
],
"group": 1},
{"id": "Node2",
"ip_adresses": [
{"ip_adress": "aa.bbb.117.96/28"}
],
"group": 1},
{"id": "Node3",
"ip_adresses": [
{"ip_adress": "eeee:ffff:400:3001::7"},
{"ip_adress": "eeee:ffff:400:3001::8"},
{"ip_adress": "eeee:ffff:400:3001::9"},
{"ip_adress": "eeee:ffff:400:3001::10"},
{"ip_adress": "eeee:ffff:400:3001::11"},
{"ip_adress": "eeee:ffff:400:3001::12"},
{"ip_adress": "eeee:ffff:400:3001::13"},
{"ip_adress": "eeee:ffff:400:3001::14"},
{"ip_adress": "eeee:ffff:400:3001::15"},
{"ip_adress": "eeee:ffff:400:3001::16"},
{"ip_adress": "eeee:ffff:400:3001::17"}
],
"group": 1},
{"id": "Node4",
"ip_adresses": [
{"ip_adress": "cc.dd38.151"},
{"ip_adress": "cc.dd38.152"}
],
"group": 1},
{"id": "Node5",
"ip_adresses": [
{"ip_adress": "aa.bbb.114.36"},
{"ip_adress": "aa.bbb.114.37"}
],
"group": 1}
];
var links = [
{"source": "RootNode", "target": "Node1", "value": 140},
{"source": "RootNode", "target": "Node2", "value": 140},
{"source": "RootNode", "target": "Node3", "value": 140},
{"source": "RootNode", "target": "Node4", "value": 140},
{"source": "RootNode", "target": "Node5", "value": 140}
];
var color = d3.scaleOrdinal(d3.schemeCategory10);
//creating and configuring the d3 force-directed graph simulation
var simulation = d3.forceSimulation()
.force("charge", d3.forceManyBody().strength(-2000))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("link", d3.forceLink()
.distance(function(d){return d.value;})
.strength(1.3).id(function(d){return d.id;}));
//create a svg in the body of index.html
var svg = d3.select("body").append("svg")
.classed("simulation", 1)
.attr("width", width)
.attr("height", height);
//setting the links
var glink = svg.append("g")
.attr("class", "links")
.selectAll("links")
.data(links).enter();
var link = glink.append("polyline")
.attr("stroke-width", 2);
//setting the nodes. they will be div elements
var node = d3.select("body")
.append("div")
.attr("class", "nodes")
.selectAll(".node")
.data(nodes)
.enter().append("div")
.attr("class", "node")
.attr("id", function(d){return d.id;})
.style("background", function(d) { return color(d.group); });
node.each(function (d, i){
if(d.group === 1 )
{
console.log(d.id, i, d3.select(this).attr("id"));
d3.select(this).append("select")
.attr("size", 2)
.selectAll('option')
.data(nodes[i].ip_adresses)
.enter()
.append("option")
.text(function(d){return d.ip_adress;});
}
else
{
d3.select(this).text(function (d){return d.id;});
}
});
//start the simulation
node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
//assigning data to the simulation and set tick
simulation
.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(links);
function ticked() {
link.attr("points", function(d) {
var sourceX = d.source.x;
var sourceY = d.source.y;
var targetX = d.target.x;
var targetY = d.target.y;
return sourceX + "," + sourceY + " " +
(sourceX + targetX)/2 + "," + (sourceY + targetY)/2 + " " +
targetX + ", " + targetY;
});
node.style('left', function(d ,i) {
return d.x-$("[id='"+d.id+"']").outerWidth()/2+"px";
})
.style('top', function(d) {
return d.y-$("[id='"+d.id+"']").outerHeight()/2+"px";
});
}
d3.select("body").selectAll("option").on("dblclick", function(){
alert(this.text);
});
//this would be nice but it is not working in the d3 graph
$( ".node" ).resizable();
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
d.fixed = true;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
推荐答案
第一个更改，您需要删除拖动开始和结束事件:
First change, you need is remove the drag start and end events:
node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
原因::他们正在忙这个事件，因此无法调整JQUERY的大小.
Reason: they are eating up the event so JQUERY resizable will not work.
向您的选择中添加第二个类，以便它们是唯一的(将用于jquery选择):
Second add class to your select so that they are unique (will be used for jquery selection):
d3.select(this).append("select")
.attr("size", 2)
.attr("class", function(){ return "my-list" + i;})//giving unique class to all select.
第三次添加调整大小(alsoResize)以选择上面制作的唯一的类名，以便在调整大小时选择内容也进行调整.
Third add resize (alsoResize) to select unique class names made above, so that on resize the select also resizes.
$( ".node" ).each(function(i){
$( this ).resizable({alsoResize: ".my-list"+i});
})
工作代码此处
这篇关于当div用作d3力导向图中的节点时，动态调整div的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
