杂货铺
d3.js Day / Hour Heatmap
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <style> rect.bordered { stroke: #E6E6E6; stroke-width:2px; } text.mono { font-size: 9pt; font-family: Consolas, courier; fill: #aaa; } text.axis-workweek { fill: #000; } text.axis-worktime { fill: #000; } </style> <script src="http://d3js.org/d3.v3.js"></script> </head> <body> <div id="chart"></div> <div id="dataset-picker"> </div> <script type="text/javascript"> var margin = { top: 50, right: 0, bottom: 100, left: 30 }, width = 960 - margin.left - margin.right, height = 430 - margin.
d3.js Cluster Dendrogram
<!DOCTYPE html> <meta charset="utf-8"> <style> .node circle { fill: #999; } .node text { font: 10px sans-serif; } .node–internal circle { fill: #555; } .node–internal text { text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; } .link { fill: none; stroke: #555; stroke-opacity: 0.4; stroke-width: 1.5px; } </style> <svg width="960" height="2000"></svg> <script src="//d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.
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') .