杂货铺
d3.js Click Zoom in/out
<button id="zoom_in">+</button> <button id="zoom_out">-</button>
app.css .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; }
app.js var width = 960, height = 500; var randomX = d3.randomUniform(width / 2, 80), randomY = d3.randomUniform(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY()]; }); var zoom = d3.zoom().scaleExtent([1 / 4, 8]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .append("g") .attr('id', 'test') .
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.