D3JSでノードをドラッグ＆ドロップして固定する

D3JSを使用してグラフを表示するHTMLファイルがあります。 JSFiddleはthis link hereです。私はドラッグ＆ドロップでノード位置の固定を可能にする機能を使用しなければならないことを知っている：D3JSでノードをドラッグ＆ドロップして固定する

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

function dragstart(d) { 
    d3.select(this).classed("fixed", d.fixed = true); 
}

しかし、ノードをドラッグアンドドロップで、私は位置を固定することができません。 this linkと同じ機能が必要です。ノードを元の位置に戻したくないです。どうすれば変更できますか？この例から

出典

2016-04-03 Prateek Narendra

-1

解決策は、dragstartで 'fixed'ノードプロパティをtrueに設定することです。これにより、位置を追加できます。

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> 
<style> 

.node { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

</style> 
</head> 
<body> 
<script> 

var width = 1280, 
     height = 960; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("graph.json", function(error, graph) { 
    if (error) throw error; 

    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll("graph.link") 
     .data(graph.links) 
     .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll("graph.node") 
     .data(graph.nodes) 
     .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.fill); }) 
     .call(force.drag); 

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

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

    node.append("title") 
     .text(function(d) { return d.name }); 

    force.on("tick", tick); 

    function tick() { 
     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; }); 

     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
    }; 


}); 

</script> 
</body> 
</html>

出典

2016-04-03 19:39:45 Hashes

私はあなたの質問を編集して以来、js fiddleを親切にチェックしました。https://jsfiddle.net/vgy1s8k3/1/を参照してください。 – Hashes

：あなたは機能をドラッグするための呼び出しを追加する必要がhttp://bl.ocks.org/mbostock/3750558

：

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

以下れる

：

function dragstart(d) { 
    d3.select(this).classed("fixed", d.fixed = true); 
}

キーポイントはtrueにd.fixedを設定しています。

EDITあなたはnode_dragを呼び出していなかったあなたのフィドルで

。

var node = gnodes.append("circle") 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { 
     thelistofcolors[d.group] = color(d.group); 
     return color(d.group); }) 
     .call(node_drag); // <<<<<<<this line

そして、あなたが後でそれを呼び出すことができるように関数に目盛りを変更します：

force.on("tick", tick); 

    function tick() { 
    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; }); 

    gnodes.attr("transform", function(d) { 
     return 'translate(' + [d.x, d.y] + ')'; 
    }); 



    };

がフィルタリングされない（表示されている全てのデータとフィドルを更新しましたので、あなたはそのようなノード上でそれを呼び出す必要がありますクリックすると）：

出典

2016-04-03 18:43:38 thatOneGuy

これは質問をする前に、私は研究のビットをお勧めします本当に簡単に、次の時間を発見された – thatOneGuy

アイブ氏が実際にそれを入れてみました..私はエラーが何であるかを知らない。これ要旨をチェック - HTTPS：/ /gist.github.com/pnpninja/4779e8242ec7b971cf36142c89055cbf –

編集した質問を確認してください –

D3JSでノードをドラッグ＆ドロップして固定する

答えて

関連する問題