Much better.

cereallarceny · Jul 13, 2019 · e86aa45 · e86aa45
1 parent 79d0a1e
commit e86aa45
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 81 deletions.
diff --git a/src/index.stories.js b/src/index.stories.js
@@ -170,23 +170,46 @@ stories.add('using D3.js', () => {
 stories.add('using refactor', () => {
   const data = text('Path "d"', samplePathData);
 
+  const size = number('Thickness', 5, {
+    range: true,
+    min: 1,
+    max: 50,
+    step: 1
+  });
+
+  const segments = number('Number of segments', 100, {
+    range: true,
+    min: 10,
+    max: 600,
+    step: 10
+  });
+
+  const samplesPerSegment = number('Samples per segment', 4, {
+    range: true,
+    min: 1,
+    max: 40,
+    step: 1
+  });
+
+  const shouldRound = boolean('Should round precision', false);
+
+  const decimalPlaces = shouldRound
+    ? number('Decimal places', 3, {
+        range: true,
+        min: 0,
+        max: 10,
+        step: 1
+      })
+    : null;
+
   class RenderComponent extends React.Component {
     componentDidMount() {
       // Please ignore any React stuff... this works with any Javascript project and is NOT a React component
       // React is used here in Storybook just to get a demo running. :)
       const margin = { top: 0, right: 0, bottom: 0, left: 0 },
         width = 600 - margin.left - margin.right,
         height = 300 - margin.top - margin.bottom,
-        colors = d3.schemeCategory10,
-        pts = [],
-        numPts = 5;
-
-      for (var i = 0; i < numPts; i++) {
-        pts.push([i * (width / numPts), 50]);
-        pts.push([i * (width / numPts), height - 50]);
-        pts.push([i * (width / numPts) + 50, height - 50]);
-        pts.push([i * (width / numPts) + 50, 50]);
-      }
+        colors = d3.interpolateRainbow;
 
       const svg = d3
           .select('svg')
@@ -205,10 +228,10 @@ stories.add('using refactor', () => {
           .attr('class', 'hidden init')
           .attr('stroke-width', 2),
         p = line.node(),
-        pieces = getNewSamples(p, 40, 10);
+        pieces = getNewSamples(p, segments, samplesPerSegment, decimalPlaces);
 
-      // drawPoints(pieces, g, colors);
-      drawSegments(pieces, g, colors);
+      // drawPoints(pieces, g, colors, size);
+      drawSegments(pieces, g, colors, size);
     }
 
     render() {

diff --git a/src/refactor.js b/src/refactor.js
@@ -1,14 +1,24 @@
 import * as d3 from 'd3';
 
-export const getNewSamples = (path, numSegments, numSamplesPerSegment) => {
+export const getNewSamples = (
+  path,
+  numSegments,
+  numSamplesPerSegment,
+  accuracy
+) => {
   const pathLength = path.getTotalLength(),
     totalSamples = numSegments * numSamplesPerSegment,
     allSamples = [],
     allSegments = [];
 
   for (let sample = 0; sample <= totalSamples; sample++) {
     const progress = sample / totalSamples;
-    const { x, y } = path.getPointAtLength(progress * pathLength);
+    let { x, y } = path.getPointAtLength(progress * pathLength);
+
+    if (accuracy) {
+      x = x.toFixed(accuracy);
+      y = y.toFixed(accuracy);
+    }
 
     allSamples.push({
       x,
@@ -34,67 +44,7 @@ export const getNewSamples = (path, numSegments, numSamplesPerSegment) => {
   return allSegments;
 };
 
-// const getSamples = (path, precision) => {
-//   const pathLength = path.getTotalLength(),
-//     samples = [];
-
-//   samples.push(0);
-
-//   let i = 0;
-//   while ((i += precision) < pathLength) samples.push(i);
-
-//   samples.push(pathLength);
-
-//   return samples.map(t => {
-//     const { x, y } = path.getPointAtLength(t),
-//       a = [x, y];
-
-//     a.color = t / pathLength;
-
-//     return a;
-//   });
-// };
-
-// export const splitPath = (p, sampleInterval) => {
-//   const pLength = p.getTotalLength(),
-//     numPieces = 10,
-//     pieceSizes = [],
-//     pieces = [];
-
-//   let cumu = 0;
-
-//   for (let i = 0; i < numPieces; i++) {
-//     pieceSizes.push({ i, size: Math.floor(Math.random() * 20) + 5 });
-//   }
-
-//   const size = pieceSizes.reduce((a, b) => {
-//       return a + b.size;
-//     }, 0),
-//     pieceSize = pLength / size;
-
-//   pieceSizes.forEach((x, j) => {
-//     const segs = [];
-
-//     for (let i = 0; i <= x.size + sampleInterval; i += sampleInterval) {
-//       const pt = p.getPointAtLength(i * pieceSize + cumu * pieceSize);
-
-//       segs.push([pt.x, pt.y]);
-//     }
-
-//     const angle =
-//       (Math.atan2(segs[1][1] - segs[0][1], segs[1][0] - segs[0][0]) * 180) /
-//       Math.PI;
-
-//     // TODO: Angle doesn't do anything...
-//     pieces.push({ id: j, segs, angle });
-
-//     cumu += x.size;
-//   });
-
-//   return pieces;
-// };
-
-export const drawSegments = (pieces, g, colors) => {
+export const drawSegments = (pieces, g, colors, size) => {
   const lineFunc = d3
     .line()
     .x(d => d.x)
@@ -105,13 +55,13 @@ export const drawSegments = (pieces, g, colors) => {
     .enter()
     .append('path')
     .attr('fill', 'none')
-    .attr('stroke-width', 12)
+    .attr('stroke-width', size)
     .attr('class', 'piece')
     .attr('d', lineFunc)
-    .attr('stroke', (d, i) => colors[i]);
+    .attr('stroke', d => colors(d[(d.length / 2) | 0].progress));
 };
 
-export const drawPoints = (pieces, g, colors) => {
+export const drawPoints = (pieces, g, colors, size) => {
   g.selectAll('circle')
     .data(
       pieces
@@ -126,10 +76,10 @@ export const drawPoints = (pieces, g, colors) => {
     .append('circle')
     .attr('cx', d => d.x)
     .attr('cy', d => d.y)
-    .style('fill', d => colors[d.id])
+    .style('fill', d => colors(d.progress))
     .attr('r', 0)
     .transition()
     .duration(0)
     .delay((d, i) => i * 10)
-    .attr('r', 2);
+    .attr('r', size / 2);
 };