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.

qiu-deqing · Accepted Answer · 2014-01-02 08:27:33Z

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/

Manoj · Accepted Answer · 2014-01-02 07:43:00Z

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; });
            });

Collectives™ on Stack Overflow

Trying build graph using d3.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related