Trying build graph using d3.js

Question

I am a newbie to d3 and trying to do a graph layout.

        var w = 1000;
        var h = 500;
        var dataset = {
            nodes: [{
                name: 'Aden'
            }, {
                name: 'Bob'
            }, {
                name: 'Sue'
            }],
            edges: [{
                source: 0,
                target: 1
            }, {
                source: 1,
                target: 2
            }]
        };
        var svg = d3.select("body")
            .append("svg")
            .attr("height", h)
            .attr("width", w);

        var force = d3.layout.force()
            .nodes(dataset.nodes)
            .links(dataset.edges)
            .size([w, h])
            .linkDistance([50])
            .start();

        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", "red")
            .call(force.drag);

        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1);

My fiddle is in : http://jsfiddle.net/abhimita/MnX23/

I don't see any graph but couldn't figure out what I am doing incorrectly. Any help will be really appreciated.

Answer 1

1.you neet to set cx and cy of circle to position the circle 2.you need to set x1 y1, x2 y2 of line to position line

3.if you need active you need to listen to tick event of force layout

            var w = 300;
            var h = 300;
            var dataset = {
                nodes: [{
                    name: 'Aden'
                }, {
                    name: 'Bob'
                }, {
                    name: 'Sue'
                }],
                edges: [{
                    source: 0,
                    target: 1
                }, {
                    source: 1,
                    target: 2
                }]
            };
            var svg = d3.select("body")
                .append("svg")
                .attr("height", h)
                .attr("width", w);

            var force = d3.layout.force()
                .nodes(dataset.nodes)
                .links(dataset.edges)
                .size([w, h])
            .on("tick", tick) // listener tick to listen position change 
                .linkDistance([50])
                .start();

            var nodes = svg.selectAll("circle")
                .data(dataset.nodes)
                .enter()
                .append("circle")
                .attr("r", 10)
            // set cx cy of circle to position the circle
            .attr("cx", function (d) {return d.x; })
            .attr("cy", function (d) { return d.y; })
                .style("fill", "red")
                .call(force.drag);

            var edges = svg.selectAll("line")
                .data(dataset.edges)
                .enter()
                .append("line")
            // set x1, y1, x2, y2 to position the line
            .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;
            })
                .style("stroke", "#ccc")
                .style("stroke-width", 1);

// make it actively
function tick(e) {
     edges.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; });

  nodes.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

demo update: http://jsfiddle.net/MnX23/3/

Answer 2

In circle you have to mention the cx and cy attributes and line x1,y1,x2,y2 attributes

• The x1 attribute defines the start of the line on the x-axis
• The y1 attribute defines the start of the line on the y-axis
• The x2 attribute defines the end of the line on the x-axis
• The y2 attribute defines the end of the line on the y-axis

Try this code:

DEMO

   var w = 1000;
        var h = 500;
        var dataset = {
            nodes: [{
                name: 'Aden'
            }, {
                name: 'Bob'
            }, {
                name: 'Sue'
            }],
            edges: [{
                source: 0,
                target: 1
            }, {
                source: 1,
                target: 2
            }]
        };
        var svg = d3.select("body")
            .append("svg")
            .attr("height", h)
            .attr("width", w);

        var force = d3.layout.force()
            .nodes(dataset.nodes)
            .links(dataset.edges)
            .size([w, h])
            .linkDistance([50])
            .start();

        var nodes = svg.selectAll("circle")
            .data(dataset.nodes)
            .enter()
            .append("circle")
            .attr("r", 10)
            .style("fill", "red")

            .call(force.drag);

        var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")

            .style("stroke", "#ccc")
            .style("stroke-width", 1);

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

      nodes.attr("cx", function(d) { return d.x; })
           .attr("cy", function(d) { return d.y; });
            });