Last active
July 30, 2017 17:49
-
-
Save ravi4j/cafbc582f41922410d2ed77ee2f7b3de to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>Welcome to Vue</title> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/vue"></script> | |
| <style> | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| font-family: monospace; | |
| } | |
| .controls { | |
| position: fixed; | |
| top: 16px; | |
| left: 16px; | |
| background: #f8f8f8; | |
| padding: 0.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .svg-container { | |
| display: table; | |
| border: 1px solid #f8f8f8; | |
| box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); | |
| } | |
| .controls>*+* { | |
| margin-top: 1rem; | |
| } | |
| label { | |
| display: block; | |
| } | |
| .links line { | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| } | |
| .nodes circle { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| .zoom { | |
| cursor: move; | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="controls"> | |
| <div> | |
| <label>Scale Screen</label> | |
| <input type="range" v-model="settings.parent" min="0" max="100" /> | |
| </div> | |
| </div> | |
| <div id="container" class="svg-container" :style="{width: settings.parent + '%'}"> | |
| <svg viewBox="0 0 960 600"> | |
| <g class="g" transform="translate(0,0)"> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| new Vue({ | |
| el: "#app", | |
| data: function() { | |
| return { | |
| innerSpace: null, | |
| settings: { | |
| strokeColor: "#29B5FF", | |
| width: 960, | |
| height: 600, | |
| parent: 100 | |
| } | |
| }; | |
| }, | |
| mounted: function() { | |
| var width = this.settings.width, | |
| height = this.settings.height; | |
| var radius = 5; | |
| var color = d3.scaleOrdinal().range(d3.schemeCategory20); | |
| var circles = d3.range(1000).map(function() { | |
| return { | |
| x: Math.round(Math.random() * (width - radius * 2) + radius), | |
| y: Math.round(Math.random() * (height - radius * 2) + radius) | |
| }; | |
| }); | |
| // Zoom Function | |
| var zoom = d3.zoom() | |
| .scaleExtent([1 / 2, 64]) | |
| .on("zoom", zoomFunction); | |
| // Inner Drawing Space | |
| var innerSpace = d3.select(".g") | |
| .attr("transform", "translate(" + 0 + "," + 0 + ")") | |
| .call(zoom); | |
| // append some dummy data | |
| var circles = innerSpace.selectAll('circles') | |
| .data(circles).enter() | |
| .append('circle') | |
| .attr("id", "circles") | |
| .attr("cx", function(d) { | |
| return d.x; | |
| }) | |
| .attr("cy", function(d) { | |
| return d.y; | |
| }) | |
| .attr("r", radius) | |
| .attr('stroke-width', 2) | |
| .style('stroke', 'orange') | |
| .style('fill', function(d, i) { | |
| return color(i); | |
| }); | |
| // append zoom area | |
| var view = innerSpace.append("rect") | |
| .attr("class", "zoom") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .call(zoom); | |
| function zoomFunction() { | |
| var transform = d3.event.transform, | |
| point = transform.invert([width / 2, height / 2]); | |
| transform = transform.translate(point[0] - width / 2, point[1] - height / 2); | |
| circles.attr("transform", transform); | |
| } | |
| d3.select('svg-container').call(zoom); | |
| }, | |
| computed: { | |
| style: function() { | |
| return { | |
| width: this.settings.parent | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment