How to drag and drop nodes, if I give fixed pixel for nodes in D3 force layout

Question

I put fixed positions for every nodes.

Here I can't drag and drop my nodes.

Check out the example data from:

var data = {"nodes":[
                    {"name":"YHO", "full_name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"500","yval":"100"},
                    {"name":"GGL", "full_name":"Google", "type":2, "slug": "www.google.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"100","yval":"200"},
                    {"name":"BNG", "full_name":"Bing", "type":2, "slug": "www.bing.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"200","yval":"200"},
                    {"name":"YDX", "full_name":"Yandex", "type":2, "slug": "www.yandex.com", "entity":"company", "img_hrefD":"", "img_hrefL":"","xval":"400","yval":"200"},


                    {"name":"CEO", "prefix":"Mr.", "fst_name":"Jim", "snd_name":"Bean", "type":3, "slug": "", "entity":"employee","xval":"100","yval":"400"},
                    {"name":"ATT", "prefix":"Ms.", "fst_name":"Jenna", "snd_name":"Jameson", "type":3, "slug": "", "entity":"employee","xval":"200","yval":"400"},
                    {"name":"CTO", "prefix":"Mr.", "fst_name":"Lucky", "snd_name":"Luke", "type":3, "slug": "", "entity":"employee","xval":"300","yval":"400"},
                    {"name":"CDO", "prefix":"Ms.", "fst_name":"Pamela", "snd_name":"Anderson", "type":3, "slug": "", "entity":"employee","xval":"300","yval":"500"},
                    {"name":"CEO", "prefix":"Mr.", "fst_name":"Nacho", "snd_name":"Vidal", "type":3, "slug": "", "entity":"employee","xval":"500","yval":"500"},
                ], 
        "links":[
                    {"source":0,"target":1,"value":1,"distance":5},
                    {"source":0,"target":2,"value":1,"distance":5},
                    {"source":0,"target":3,"value":1,"distance":5},                 

                    {"source":4,"target":0,"value":1,"distance":6},
                    {"source":5,"target":1,"value":1,"distance":6},
                    {"source":6,"target":0,"value":1,"distance":6},
                    {"source":7,"target":1,"value":1,"distance":6},
                    {"source":8,"target":0,"value":1,"distance":6},
                    {"source":7,"target":8,"value":1,"distance":6},
                    ]
           }    


    var w = 560,
        h = 500,
        radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]);

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

        //vis.append("defs").append("marker")
        //.attr("id", "arrowhead")
        //.attr("refX", 22 + 3) /*must be smarter way to calculate shift*/
        //.attr("refY", 2)
        //.attr("markerWidth", 6)
        //.attr("markerHeight", 4)
        //.attr("orient", "auto")
        //.append("path")
            //.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead

    //d3.json(data, function(json) {
        var force = self.force = d3.layout.force()
            .nodes(data.nodes)
            .links(data.links)
            .linkDistance(function(d) { return (d.distance*10); })
            //.friction(0.5)
            .charge(-250)
            .size([w, h])
            .start();



        var link = vis.selectAll("line.link")
            .data(data.links)
            .enter().append("svg:line")
            .attr("class", function (d) { return "link" + d.value +""; })
            .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; })
            .attr("marker-end", function(d) {
                                                if (d.value == 1) {return "url(#arrowhead)"}
                                                else    { return " " }
                                            ;});

        function fade(opacity) {

                link.style("opacity", function(d) {
                    return d.source === d || d.target === d ? 1 : opacity;
                });

            }


        function openLink() {
            return function(d) {
                var url = "";
                if(d.slug != "") {
                    url = d.slug
                } //else if(d.type == 2) {
                    //url = "clients/" + d.slug
                //} else if(d.type == 3) {
                    //url = "agencies/" + d.slug
                //}
                window.open("//"+url)
            }
        }




        var node = vis.selectAll("g.node")
            .data(data.nodes)
          .enter().append("svg:g")
            .attr("class", "node")
            .call(force.drag);


        node.append("circle")
            .attr("class", function(d){ return "node type"+d.type})
            .attr("r",function(d){if(d.entity == "description"){ return 6 } else { return 18 }})
            //.on("mouseover", expandNode);
            //.style("fill", function(d) { return fill(d.type); })



        node.append("svg:image")
            .attr("class", function(d){ return "circle img_"+d.name })
            .attr("xlink:href", function(d){ return d.img_hrefD})
            .attr("x", "-36px")
            .attr("y", "-36px")
            .attr("width", "70px")
            .attr("height", "70px")
            .on("click", openLink())
            .on("mouseover", function (d) { if(d.entity == "company")
                                                {
                    d3.select(this).attr("width", "90px")
                                    .attr("x", "-46px")
                                    .attr("y", "-36.5px")
                                   .attr("xlink:href", function(d){ return d.img_hrefL});                           
                                                }
                })
            .on("mouseout", function (d) { if(d.entity == "company")
                                            {
                    d3.select(this).attr("width", "70px")
                                    .attr("x", "-36px")
                                    .attr("y", "-36px")
                                   .attr("xlink:href", function(d){ return d.img_hrefD});
                                            }
                });    


        node.append("text")
            .attr("class", function(d){ return "nodetext title_"+d.name })
            .attr("dx", 0)
            .attr("dy", ".35em")
            .style("font-size","10px")
            .attr("text-anchor", "middle")
            .style("fill", "white")
            .text(function(d) { if (d.entity != "description"){return d.name} });



        node.on("mouseover", function (d) {
            link.style('stroke-width', function(l) {
                if (d === l.source || d === l.target)
                return 4;
              else
                return 2;
            });
            if (d.entity == "company"){   
                d3.select(this).select('text')
                    .transition()
                    .duration(300)
                    .text(function(d){
                            return d.full_name;
                        })
                    .style("font-size","15px")

            }
            else if(d.entity == "employee"){
                var asdf = d3.select(this);
                asdf.select('text').remove();

                asdf.append("text")
                            .text(function(d){return d.prefix + ' ' + d.fst_name })
                            .attr("class","nodetext")
                            .attr("dx", 0)
                            .attr("dy", ".35em")
                            .style("font-size","5px")
                            .attr("text-anchor", "middle")
                            .style("fill", "white")
                            .transition()
                            .duration(300)
                            .style("font-size","12px");

                asdf.append("text").text(function(d){return d.snd_name })
                            .attr("class","nodetext")
                            .attr("transform","translate(0, 12)")
                            .attr("dx", 0)
                            .attr("dy", ".35em")
                            .style("font-size","5px")
                            .attr("text-anchor", "middle")
                            .style("fill", "white")
                            .transition()
                            .duration(300)
                            .style("font-size","12px");                                         
            }
            else {
                d3.select(this).select('text')
                    .transition()
                    .duration(300)
                    .style("font-size","15px")
            }

            if (d.entity == "company") {
                d3.select(this).select('image')
                    .attr("width", "90px")
                    .attr("x", "-46px")
                    .attr("y", "-36.5px")
                    .attr("xlink:href", function (d) {
                        return d.img_hrefL
                        });               
            }

            if (d.entity == "company") {

                d3.select(this).select('circle')
                                .transition()
                                .duration(300)
                                .attr("r",28)

            }
            else if (d.entity == "employee"){
                d3.select(this).select('circle')
                                .transition()
                                .duration(300)
                                .attr("r",32)
            }
        })


         node.on("mouseout", function (d) {
            link.style('stroke-width', 2);
            if (d.entity == "company") {
                d3.select(this).select('text')
                    .transition()
                    .duration(300)
                    .text(function(d){return d.name;})
                    .style("font-size","10px")
                }
            else if(d.entity == "employee"){
                ///////////////////////////
                // CHANGE
                ///////////////////////////

                d3.select(this).selectAll('text').remove();

                //d3.select(this).select('text')
                d3.select(this).append('text')
                    .text(function(d){return d.name;})
                    .style("font-size","14px")  
                    .attr("dx", 0)
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .style("fill", "white")
                    .attr("class","nodetext")
                    .transition()
                    .duration(300)
                    .style("font-size","10px")

            }
            else {
                d3.select(this).select('text')
                    .transition()
                    .duration(300)
                    .style("font-size","10px")
            }


             if (d.entity == "company") {
                d3.select(this).select('image')
                    .attr("width", "70px")
                    .attr("x", "-36px")
                    .attr("y", "-36px")
                    .attr("xlink:href", function (d) {
                    return d.img_hrefD
                });
            }

            if (d.entity == "company" || d.entity == "employee") {

                d3.select(this).select('circle')
                                .transition()
                                .duration(300)
                                .attr("r",18)
            }

        });

        force.on("tick", function() {
          link.attr("x1", function(d) { return d.source.xval; })
              .attr("y1", function(d) { return d.source.yval; })
              .attr("x2", function(d) { return d.target.xval; })
              .attr("y2", function(d) { return d.target.yval; });

          node.attr("transform", function(d) { return "translate(" + d.xval + "," + d.yval + ")"; });
        });
    //});

refer this http://bl.ocks.org/mbostock/3750558 – Manoj Jan 09 '14 at 11:50 — Manoj, Jan 09 '14 at 11:50

score 0 · Answer 1 · answered Jan 09 '14 at 11:38

0

You need to set and use the .x and .y attributes for the coordinates, as this is what the force layout uses. Then you just need to set .fixed for all the nodes. The following block of code, run at the very beginning, does this.

data.nodes.forEach(function(n) {
            n.fixed = true;
            n.x = +n.xval;
            n.y = +n.yval;
        });

The only other change is to use .x and .y in the tick handler function:

force.on("tick", function() {
          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 + ")"; });
        });

Complete example here.

answered Jan 09 '14 at 11:38

Lars Kotthoff

107,425
16
204
204

thank you. how to get all nodes x and y positions when i click button – megala Jan 09 '14 at 11:43
You would need to attach a click handler and iterate over `nodes`. – Lars Kotthoff Jan 09 '14 at 11:47
yes thank you. when i drag my nodes. it will go off from svg boundary(width,height). how to limit to drag and drop up to svg boundary. – megala Jan 09 '14 at 12:17
You can do this in the `tick` handler by limiting the coordinates you set. – Lars Kotthoff Jan 09 '14 at 12:18
E.g. `node.forEach(function(n) { n.x = Math.max(0, Math.min(n.x, width)); });` and similarly for `n.y`. – Lars Kotthoff Jan 09 '14 at 12:26
`node.forEach(function(n) { n.x = Math.max(0, Math.min(n.x, w)); n.y = Math.max(0, Math.min(n.y, h)); }); ` I added this code but it's not working. – megala Jan 09 '14 at 12:54
Sorry, that should have been `data.nodes.forEach` -- http://jsfiddle.net/mVmjc/5/ – Lars Kotthoff Jan 09 '14 at 13:22
How to draw multiple links between two node.Link line should not be arc. Please help me. Is that possible? – megala Jan 20 '14 at 11:54
You can open a separate question about this, but I suggest that you search the examples before. In particular [this question](http://stackoverflow.com/questions/11368339/drawing-multiple-edges-between-two-nodes-with-d3) should help. – Lars Kotthoff Jan 20 '14 at 12:00
I have added new question [My Qustion](http://stackoverflow.com/questions/21274870/multiple-straight-line-between-two-node-in-d3-js) – megala Jan 22 '14 at 05:52

How to drag and drop nodes, if I give fixed pixel for nodes in D3 force layout

1 Answers1