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
  • 1
    What you mean with does not use canvas from HTML5? And why sigma is not a pure Javascript library? – MarcoL Aug 26 '14 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 Oct 10 '14 at 15:15
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.

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}
  ]
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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