examples: add d3-voronoi; generate triangles

* add PointsGridOptions.roundedNumbers;
tobiaskraus · Apr 21, 2019 · f5d3d04 · f5d3d04
1 parent 0d9e80a
commit f5d3d04
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/examples/package.json b/examples/package.json
@@ -11,9 +11,11 @@
     "license": "ISC",
     "devDependencies": {
         "@types/d3": "^5.7.2",
+        "@types/d3-voronoi": "^1.1.9",
         "parcel-bundler": "^1.12.3"
     },
     "dependencies": {
-        "d3": "^5.9.2"
+        "d3": "^5.9.2",
+        "d3-voronoi": "^1.1.4"
     }
 }
diff --git a/examples/src/triangles-web-with-d3/index.html b/examples/src/triangles-web-with-d3/index.html
@@ -8,6 +8,13 @@
     <title>svg-gen example: triangles-web-with-d3</title>
 
     <link rel="stylesheet" href="../example.css">
+
+    <style>
+        polygon {
+            fill: purple;
+            stroke: white;
+        }
+    </style>
 </head>
 <body>
     <div class="header">

diff --git a/examples/src/triangles-web-with-d3/triangles-web-with-d3.ts b/examples/src/triangles-web-with-d3/triangles-web-with-d3.ts
@@ -1,4 +1,5 @@
 import * as d3 from 'd3';
+import * as voronoi from 'd3-voronoi';
 
 import { PointsGrid } from '../../../src';
 import { Point } from '../../../src/model/types';
@@ -20,10 +21,11 @@ class TrianglesWeb {
             {rows, cols} = this.getWebDimension(this.options.rowsAndCols, width, height);
 
         let pointsGrid = new PointsGrid({
-            maxX: width,
-            maxY: height,
+            maxX: Math.round(width),
+            maxY: Math.round(height),
             rows,
             cols,
+            roundedNumbers: true,
             pointsOnBottomEdge: true,
             pointsOnLeftEdge: true,
             pointsOnRightEdge: true,
@@ -40,14 +42,27 @@ class TrianglesWeb {
             })
         })
 
+        // draw points
         d3.select(this.options.svgSelector)
             .selectAll('circle')
             .data(points)
             .enter()
             .append('circle')
             .attr('r', 2)
-            .attr('cx', d => Math.floor(d[0]))
-            .attr('cy', d => Math.floor(d[1])); 
+            .attr('cx', d => d[0])
+            .attr('cy', d => d[1]);
+
+        let graph = voronoi.voronoi();
+        let triangles = graph.triangles(points);
+        console.log('triangles', triangles);
+
+        // draw triangles
+        d3.select(this.options.svgSelector)
+            .selectAll('polygon')
+            .data(triangles)
+            .enter()
+            .append('polygon')
+            .attr('points', d => `${d[0][0]},${d[0][1]} ${d[1][0]},${d[1][1]} ${d[2][0]},${d[2][1]}`);
     }
 
     private getWebDimension (rowsAndCols: number, svgWidth: number, svgHeight: number) {

diff --git a/src/PointsGrid.ts b/src/PointsGrid.ts
@@ -7,6 +7,7 @@ interface PointsGridOptions {
     maxY: number;   // caution: value can be above (see explanation above)
     cols: number;
     rows: number;
+    roundedNumbers?: boolean;
     randomDistortionX?: number;
     randomDistortionY?: number;
     pointsOnTopEdge?: boolean;
@@ -63,14 +64,21 @@ export class PointsGrid {
 
     private generatePointsOfRow (y: number, deltaX: number) {
         const row: Point[] = [];
-        for (let x=0; x<this.options.cols; x++) {
+        for (let col=0; col<this.options.cols; col++) {
 
             // random translation (randomDistortionX & randomDistortionY)
             let rX = this.options.randomDistortionX ? Math.random() * this.options.randomDistortionX - this.options.randomDistortionX * 0.5 : 0,
-                rY =  this.options.randomDistortionY ? Math.random() * this.options.randomDistortionY - this.options.randomDistortionY * 0.5 : 0
+                rY =  this.options.randomDistortionY ? Math.random() * this.options.randomDistortionY - this.options.randomDistortionY * 0.5 : 0,
+                posX = deltaX * col + rX,
+                posY = y + rY;
+
+            if (this.options.roundedNumbers) {
+                posX = Math.round(posX);
+                posY = Math.round(posY);
+            }
             row.push([
-                deltaX * x + rX,
-                y + rY
+                posX,
+                posY
             ]);
         }
         return row;