杂货铺
d3.js Directed Graph
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Directed Graph Editor</title> <link rel="stylesheet" href="app.css"> </head> <body> </body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="app.js"></script> </html>
app.css svg { background-color: #FFF; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } svg:not(.active):not(.ctrl) { cursor: crosshair; } path.link { fill: none; stroke: #000; stroke-width: 4px; cursor: default; } svg:not(.active):not(.ctrl) path.link { cursor: pointer; } path.link.selected { stroke-dasharray: 10,2; } path.link.dragline { pointer-events: none; } path.
d3.js Drag and Zoom
<!DOCTYPE html> <meta charset="utf-8"> <style> .dot circle { fill: lightsteelblue; stroke: steelblue; stroke-width: 1.5px; } .dot circle.dragging { fill: red; stroke: brown; } .axis line { fill: none; stroke: #ddd; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var margin = {top: -5, right: -5, bottom: -5, left: -5}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var zoom = d3.