Home/ Questions/Q 8502069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T01:23:01+00:00

I want to make a graph that structures different information, a bit like pearltrees

  • 0

I want to make a graph that structures different information, a bit like “pearltrees” (http://www.pearltrees.com/).
At the moment I have elements being shown (but not yet associated with any kind of data) an I have links between them (every element is attached to the one before).
The problem is: the connections are there but nor visible.
Hint: it’s not the browser, must be the code 😉
Tried a lot, searched on the internet, but now I think this problem costs me to much time, so I want to ask You.

<!DOCTYPE html>
<html>
<head>
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0">       
     </script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.25.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.25.0"></script>
 <style type="text/css">
link { stroke: #999; }
</style>
</head>
<body>
<div></div>

<script type="text/javascript">

 var w = 960,
h = 650,
nodes = [],
node,
 i = 0,
 links = [];

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


//create force:
var force = d3.layout.force()           
.nodes(nodes)                           
.links(links)                               
.linkDistance(30)
.charge([-50])                      
.friction([0.98])   
.gravity([0.025])                       
.size([w, h]);

 //apply the force
force.on("tick", function(e) {      
    vis.selectAll("path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });   
});

//add 15 objects that are connected each to the one before.
setInterval(function(){
if(i<15){ 
    nodes.push({
        size: Math.random() * 300 + 100,
        id: i
    });
    if(i!=0){
        links.push({source: nodes[i], target: nodes[i-1]});
    }
}

i = i+1;    

vis.selectAll("path")
  .data(nodes)
  .enter().append("svg:path")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
  .attr("d", d3.svg.symbol()
  .size(function(d) { return d.size; })
  .type(function(d) { return d.type; }))
  .style("fill", "steelblue")
  .style("stroke", "white")
  .style("fill-opacity", "0.9")
  .style("stroke-width", "1.5px")
  .call(force.drag);


// Restart the force layout.
force
  .nodes(nodes)
  .links(links)
  .start();

drawLines(); 

//enter new nodes:
node.enter().append("svg:circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
  .style("fill", color)
  .on("click", click)
  .call(force.drag);

// Exit old nodes:
node.exit().remove();
}, 1000);

function drawLines(){
lines = svg.selectAll("line.link")
    .data(links);
lines.enter().insert("svg:line", "circle.node")
    .attr("class", "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; })
    .attr("drawn", 1)
    .style("stroke", "black")
    .style("stroke-width", 1)
    .style("fill", "black");
d3.selectAll("link").style("color", "black");
}

This is still a set of example-code from the D3.js-examples-site, but this will be changed in further developement.

Thanks for helping.

edit: posted more code to show you how the whole script works/does not work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not exactly sure what made it, but now it’s working.

    Stored the nodes as well as links in one variable, because JSON refused to work, ans now it does the links as it is supposed to.

    force
  .nodes(jsonData.nodes)
  .links(jsonData.links)
  .start();

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

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

node.append("image")
  .attr("xlink:href", "../img/perry_rhodan.png")
  .attr("x", -8)
  .attr("y", -8)
  .attr("width", 30)
  .attr("height", 30);

node.append("text")
  .attr("dx", 12)
  .attr("dy", ".35em")
  .attr("fill", "#aa0000")
  .text(function(d) { return d.name });

node.append("title")
    .text(function(d) { return d.skill; });    

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 + ")"; });
});
    • 0