Move, release and securely anchor a node in D3JS

Question

Move, release and securely anchor a node in D3JS

In my HTML File, I am using D3JS to display graphs. You can find the working example in this link here. I understand that the function below should allow me to fix node positions when dragging and dropping:

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

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

Despite implementing this code, I am still unable to lock node positions after dragging them. What I'm looking for can be seen in the functionality demo at this link. How can I modify it so nodes remain fixed in their new position without reverting back?

javascript d3.js

Answer 1

Answer №1

Check out this example: http://bl.ocks.org/mbostock/3750558

To make it work, remember to include the drag function call:

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

This is what the dragstart function looks like:

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

The crucial part is setting d.fixed to true.

UPDATE

In your demo, you forgot to call node_drag on the nodes. Make sure to do that like this :

 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

Also, adjust the tick function so that you can use it later:

  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] + ')'; 
    });



  };

Here's the updated demo with all data displayed (not filtered on click) : https://jsfiddle.net/vgy1s8k3/4/

Answer 2

Check out this example: http://bl.ocks.org/mbostock/3750558

To make it work, remember to include the drag function call:

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

This is what the dragstart function looks like:

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

The crucial part is setting d.fixed to true.

UPDATE

In your demo, you forgot to call node_drag on the nodes. Make sure to do that like this :

 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

Also, adjust the tick function so that you can use it later:

  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] + ')'; 
    });



  };

Here's the updated demo with all data displayed (not filtered on click) : https://jsfiddle.net/vgy1s8k3/4/

Answer 3

Answer №2

To ensure the proper positioning of nodes during dragging, it is essential to set the 'fixed' node property to true on dragstart.

<!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>

Answer 4

To ensure the proper positioning of nodes during dragging, it is essential to set the 'fixed' node property to true on dragstart.

<!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>

Move, release and securely anchor a node in D3JS

Answer №1

Answer №2

Similar questions

Youngster listens for guardian's occurrence in Angular 2

What is the process for accessing npm packages through a website?

Upon transitioning from typescript to javascript

Looking for suggestions on AngularJS and Rails integration!

Animation of hand-drawn letters using SVG technology

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

In my React application, I have integrated p5 sketches that constantly loop and repeat

Trouble arises while attempting to establish a connection between nodejs and the mLab database, accompanied by deprecation

Is there a way to keep the selected option in handlebar permanently, even after multiple page refreshes?

Angular country selection dropdown featuring national flags

What sets apart a React component from a function-as-component in React?

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

Encountering an error: Reading an undefined property - NodeJS, Express, and Mongoose

The repository's dependencies remain unresolved by Nest

When an event is triggered in Angular Component, the object is not properly defined in the handler causing errors

Unable to clear input code as intended

Struggling to load app.css, main.js, and other files while using an Express server

Is there a way in Javascript or JQuery to determine if a function is currently executing, or is there a way to tap into a return event?

Reliable Dropdown Navigation Bars

Create a new document and verify its presence within the system