D3 Force Layout error message using Visual Studio 2013 - "Unable to get property 'force' of undefined or null reference"

▲
1
▼

Using D3 javascript to create a force directed network visualization. Why do I keep receiving the same error message (as follows) everytime I try to run the code (which I am testing to learn how it actually works) using Visual Studio 2013:

Unhandled exception at line 62, column 5 in http://localhost:58513/index.html

0x800a138f - JavaScript runtime error: Unable to get property 'force' of undefined or null reference.

Here is the code that I have used:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset='utf-8' http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Simple Force Directed Network</title>
</head>
<body>
    <style>

        .node {
            fill: #ccc;
            stroke: #fff;
            stroke-width: 2px;
        }

        .link {
            stroke: #777;
            stroke-width: 2px;
        }

    </style>

    <script src='D3/d3.min.js'></script>

    <script type="text/javascript">

var width = 640;
    height = 480;

var nodes = [
            { x: width / 3, y: height / 2 },
            { x: 2 * width / 3, y: height / 2 }
    ];

var links = [
        { source: 0, target: 1 }
    ];

var svg = d3.select('body').append('svg')
                .attr('width', width)
                .attr('height', height);

var force = d3.layout.force()
                .nodes(nodes)
                .links(links)
                .size([width, height])
                .start();

force.linkDistance(width / 2);

var link = svg.selectAll('.link')
                .data(links)
                .enter().append('line')
                .attr('class', 'link');

var node = svg.selectAll('.node')
                .data(nodes)
                .enter().append('circle')
                .attr('class', 'node');

force.on('end', function () {
        node.attr('r', width / 25)
            .attr('cx', function (d) { return d.x; })
            .attr('cy', function (d) { return d.y; });

        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; });
    });
    force.start();
    </script>
</body>
</html>
javascript
visual-studio
d3.js
asked on Stack Overflow Nov 14, 2016 by Ikram Rasid • edited Nov 14, 2016 by StefanM

0 Answers

Nobody has answered this question yet.

User contributions licensed under CC BY-SA 3.0