untitled notebook

node v0.12.18
version: 4.0.0
endpointsharetweet
var R = require("ramda") module.exports = function(nodes, links, options = { }) { options.width = R.has("width", options) ? +options.width : 500; options.height = R.has("height", options) ? +options.height : 300; var JSONObject = { graph: { nodes, links }, width: options.width, height: options.height }; return "<center>" + "<style>.node { stroke: #fff; stroke-width: 1.5px; }" + ".link { stroke: #999; stroke-opacity: .6; }" + "</style>" + "<svg width = " + options.width + " height = " + options.height + " ></svg>" + "<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>" + "<script>(" + toHTMLD3Graph + ")(" + JSON.stringify(JSONObject)+ ")</script>"; } module.exports([{ "group":0, "name": 0}, { "group":0, "name": 1}],[{ source:0, target: 1, value:0.9}])
function toHTMLD3Graph(JSONObject) { width = JSONObject.width; height = JSONObject.height; graph = JSONObject.graph; svg = d3.select("svg") var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); node.append("title") .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("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); }); }
Loading…

no comments

    sign in to comment