Cajón gráfico de JavaScript/jQuery puro

Estoy buscando una biblioteca simple de JavaScript puro que no use lienzo de HTML5 y proporcione gráficos de dibujo.

Algo similar a Sigma y Cytoscape Web sería perfecto.

http://sigmajs.org/ (este cubre todas mis necesidades excepto JavaScript puro) http://cytoscapeweb.cytoscape.org/

Se supone que la biblioteca tiene tales características:

  1. dibujar nodos y aristas entre ellos (dirigidos o no)
  2. cambiando la posición de cada nodo usando arrastrar y soltar (no obligado pero con la posibilidad de agregar un detector de eventos a cada nodo)
  3. otras características como resaltar bordes y escalar también serían grandes ventajas
¿Qué quieres decir con does not use canvas from HTML5? ¿Y por qué sigma no es una pure Javascriptbiblioteca?
Si no usa lienzo, ¿a qué espera renderizar? elementos DOM? SVG? ¿Por qué no lona?

Respuestas (2)

Lo más probable es que d3.js sea lo que quieras. Utiliza HTML5/CSS/SVG para dibujar. Probablemente quieras usar Force Layout . Tiene soporte para arrastrar y soltar y simplemente puede diseñar su gráfico con CSS.

Como se mencionó , d3.js debería funcionar bien. Debería usar SVG para dibujar, por lo que el dibujo de nodos funciona, al igual que el estilo con CSS (ver ejemplo). Aquí hay un ejemplo de http://bl.ocks.org/jose187/4733747 :

gráfico de red simple

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}
  ]
}
Cajón gráfico de JavaScript/jQuery puro
RespuestasAquíPolítica de privacidad1y, 0v