動態調整div的時候，它被用作d3力指向圖中的節點

Question

嗨，Stackoverflow社區！

所以我的問題是以下幾點：

我有一個d3力指向圖。這個圖的節點是div。 現在我想能夠使用鼠標調整這個div的大小。我使用jqueryui resizable（）來達到這個目的。

不幸的是，它呈現的UI變化（當我到達節點的邊緣，我得到的MISSYMBOL調整大小），但我無法調整它們。我相信這是因爲d3-forcegraph覆蓋了jqueryui函數。我試圖停止圖形，以便我可以訪問調整大小功能，但這似乎不起作用。

有沒有人有一個想法，我可以讓這些div可調整大小？ 我創建了一個小提琴說明我的意思：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; 
} 

Answer 1

第一個變化，你需要的是刪除拖拽開始和結束事件：

node.call(d3.drag() 
.on("start", dragstarted) 
.on("drag", dragged) 
.on("end", dragended)); 

原因：他們吃了事件所以JQUERY可調整大小將不起作用。

其次添加類到你的選擇，使他們唯一的（將被用於jQuery的選擇）：

d3.select(this).append("select") 
    .attr("size", 2) 
    .attr("class", function(){ return "my-list" + i;})//giving unique class to all select. 

三加調整大小（alsoResize）選擇上面做唯一的類名稱，以便於調整選擇也調整大小。

$(".node").each(function(i){ 
    $(this).resizable({alsoResize: ".my-list"+i}); 
}) 

工作代碼here