在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小提琴，请检查，因为您已编辑过该问题，请参阅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); 
}

关键的一点是设置d.fixed到true 。

编辑

在你拨弄你不打电话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] + ')'; 
    }); 



    };

更新拨弄所有数据显示（未过滤点击）：https://jsfiddle.net/vgy1s8k3/4/

来源

2016-04-03 18:43:38 thatOneGuy

发现这真的很简单，下次我之前问一个问题，建议了一些研究 – thatOneGuy

伊夫真实目的是试图把它..我不知道是什么错误。检查这个要点 - HTTPS：/ /gist.github.com/pnpninja/4779e8242ec7b971cf36142c89055cbf –

检查编辑的问题 –

在D3JS中拖放和修复节点

回答

相关问题