4

I'm looking for a simple pure JavaScript library which does not use canvas from HTML5 and provides drawing graphs.

Something similar to Sigma and Cytoscape Web would be perfect.

http://sigmajs.org/ (this one covers all my needs except pure JavaScript) http://cytoscapeweb.cytoscape.org/

The library is supposed to have such features:

  1. drawing nodes and edges between them (directed or not)
  2. changing position of each node using drag-and-drop (not obliged but with possibility to add event listener to each node)
  3. other features like highlighting edges and scaling would be big advantages too
Improve this question
2
  • 1
    What you mean with does not use canvas from HTML5? And why sigma is not a pure Javascript library?
    – MarcoL
    Commented Aug 26, 2014 at 13:12
  • 1
    If it doesn't use canvas, what are you expecting to render to? DOM elements? SVG? Why not canvas?
    – Simon Sarris
    Commented Oct 10, 2014 at 15:15

2 Answers 2

Reset to default
1

Most probably d3.js, is what you want. It uses HTML5/CSS/SVG to draw. You probably want to use Force Layout. It has drag and drop support and you can just style your graph with CSS.

Improve this answer
0

As mentioned, d3.js should work fine. It should use SVGs for drawing, so drawing of nodes works, as does styling with CSS (see example). Here is an example from http://bl.ocks.org/jose187/4733747:

simple network graph

index.html:

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<style>

.link {
  stroke: #aaa;
}

.node text {
stroke:#333;
cursos:pointer;
}

.node circle{
stroke:#fff;
stroke-width:3px;
fill:#555;
}

</style>
<body>
<script>

var width = 960,
    height = 500

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

var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

d3.json("graphFile.json", function(json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.weight); });

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

  node.append("circle")
      .attr("r","5");

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

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

</script>

graphFile.json:

{
  "nodes":[
      {"name":"node1","group":1},
      {"name":"node2","group":2},
      {"name":"node3","group":2},
      {"name":"node4","group":3}
  ],
  "links":[
      {"source":2,"target":1,"weight":1},
      {"source":0,"target":2,"weight":3}
  ]
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.