Writing simple force layout app using D3.js

StackOverflow https://stackoverflow.com//questions/10679720

  •  12-12-2019
  •  | 
  •  

Question

I am starting to learn D3.js and wanted to write a simple app using force layout. The goal is to create 3 nodes which are floating around and can be dragged using the mouse. This is how far I have gotten using the documentation, however all I see is a small black circle in top-left corner of my window (I assume all three are overlapping over there). I have put comments on each step - at least that's what I think they are doing.

<!doctype html>
<html>
<head>
    <title>Simple Force Layout</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
</head>

<body>
    <div id="canvas"></div>

    <script type="text/javascript">

var conf = {
    canvasWidth: 600,
    canvasHeight: 400
}

var nodes = [
    { 'name': 'Node 1' },
    { 'name': 'Node 2' },
    { 'name': 'Node 3' }
];

// Add nodes to force layout and start it
var force = d3.layout.force()
    .nodes(nodes)
    .size([conf.canvasWidth, conf.canvasHeight])
    .start();

// Create an svg element
var svg = d3.select("#canvas")
    .append("svg:svg")
    .attr("width", conf.canvasWidth)
    .attr("height", conf.canvasHeight);    

// Create a circle for each node
var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
  .enter().append("svg:circle")
    .attr("r", 6)
    .call(force.drag);

    </script>
</body>
</html>

My questions:

  1. What am I missing? What else do I need to do for the nodes to float around and be draggable?
  2. I would like to have a mix or circular and rectangular nodes (based on some attribute of the node). How do I do this?

  3. When I run the application, I see the following errors in Firebug:

    "NetworkError: 404 Not Found - http://mbostock.github.com/d3/d3.geom.js?1.29.1" d3.geom.js?1.29.1

    "NetworkError: 404 Not Found - http://mbostock.github.com/d3/d3.layout.js?1.29.1"

Why is this? Some force layout examples I tried are also giving this error, but they seem to be working fine!

Was it helpful?

Solution

I will try to answer your question by showing you examples that work.

  1. The force layout has this particularity that it starts by displaying all the nodes in the upper part of the screen. Since your nodes have no links between them (if they have I don't see it in your code) it's normal that they're drawn on top of each other. You can try to fix this initial render by setting the X and Y attributes of the node to a random position on the screen. As for the floating problem: I am not 100% sure this will work, as I haven't tested it, but you could try applying different forces to your nodes, or at least at the corners of your display window. This will assure that they move and don't get outside of the screen (or use the window's bounding box). Also you need to check some force attributes related to speed and the stability of the layout if you want to be sure the nodes will always move, not just float for some time and remain in a fixed position. For the nodes to be draggable call force.drag as in http://bl.ocks.org/1095795

  2. This example shows how to present nodes with different shapes in the force layout: http://bl.ocks.org/1062383.

  3. I would suggest the single file version of D3 that usually has a file called d3v2 or something similar...It might that you can not access those files because of a network problem or CORS problem or something similar, meaning the browser will not deliver you the file. You seem to use a very old version of D3 (one year old?). A version that looks more like what you see in the next snippet will probably not throw you that error: If you can't use the online version just download the file and put it in the same directory.

Play with the D3 examples a little bit and read the documentation.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top