杂货铺
d3.js Zoomable Circle Packing
<!DOCTYPE html> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node:hover { stroke: #000; stroke-width: 1.5px; } .node–leaf { fill: white; } .label { font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; text-anchor: middle; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; } .label, .node–root, .node–leaf { pointer-events: none; } </style> <svg width="960" height="960"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.
d3.js Panning and Zooming
Controls:
Click + Drag: Draw new rectangle. Shift + Click + Drag: Pan in workspace. scroll: Zoom In/Out <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Adding Rectangles</title> <style> rect.rect-main { stroke: #d32f2f; stroke-width: 2; fill-opacity: 0; stroke-opacity: 0.5; } div.sample-div { position: absolute; top: 25%; left: 25%; } </style> </head> <body> <div class="sample-div"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script> <script type="text/javascript"> function SVGCanvas(options) { // An SVG-based drawing var self = this; // Define the global SVG options this.
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.