CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

I can not move my nodes, the force diagram does not apply in 3.js

In a previous question a user helped me with a problem that consisted in not knowing how to put images where the circles are. this time my problem is that I can not drag the nodes. This gif illustrates my problem (first I show how the nodes should move normally, then I illustrate my problem.).

enter image description here

Why does this happen?

var link = g.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke", function(d) {
    console.log(d);
    return colorLink(d.group);
  })
  .attr("marker-end", "url(#arrow)");

var node = g.selectAll("g.node")
  .data(graph.nodes)
  //.filter(function(d){ return d.type=="circle"; })
var NodeCircleEnter= node.enter().append("g")
  .attr("class","node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

  NodeCircleEnter
  .append("circle")
  .attr("r", 20)
  .attr("fill", function(d) {
    return colorNode(d.group);
  })
  .style("stroke", function(d) {
    return colorNode(d.group);
  })

// Append images
var images = NodeCircleEnter.append("svg:image")
    .attr("xlink:href",  function(d) {console.log(d); return d.image;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

This is my full code:

https://plnkr.co/edit/9uH13N3or3G9VTgQlMm9?p=preview

Upvotes: 0

Views: 106

Answers (1)

Ouroborus
Ouroborus

Reputation: 16865

Your event handlers need to be applied to the elements themselves rather than the canvas as a whole.

In this code (only existing in your Plunker project, but not in your question):

var drag_handler = d3.drag()
  .on("start", drag_start)
  .on("drag", drag_drag)
  .on("end", drag_end);

drag_handler(node);

Your variable node is the drawing. You actually want a collection of elements to affect which you get from functions like .enter(). Your variable NodeCircleEnter contains that collection so the particular line should be:

drag_handler(NodeCircleEnter);

This still leaves an issue where dragging on the labels themselves doesn't work. This is because the labels aren't children of the elements you set the handlers on.

Upvotes: 1

Related Questions