[Solved]-Dragging nodes with labels in d3 v4 force layout glitches-d3.js

Okay, seems like writing all that actually helped me think and I managed to solve this problem by myself. Posting the answer here just in case somebody happens to have the same problem.

The very simple solution has to do with the object on which the .call(d3.drag()) is executed. I cut this piece of code from the node variable (the circle SVG elements) and pasted it at the end of the variable that defines the g SVG elements:

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

So the g elements declaration ends up like this:

var gnodes = svg.selectAll("g.gnode")
    .data(graph.nodes)
    .enter()
    .append("g")
    .classed("gnode", true)
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

And it works correctly from then on. You can even drag just the label, and the node will follow it around the canvas. Great!