More two.js adoption

Author: keller-mark

examples-src/App.vue

@@ -79,6 +79,7 @@
  :pMarginLeft="120"
  :pMarginRight="10"
  :pMarginBottom="150"
+ :showDownloadButton="true"
  >
  <Axis
  slot="axisLeft"
@@ -705,6 +706,7 @@
  :pMarginLeft="120"
  :pMarginRight="10"
  :pMarginBottom="180"
+ :showDownloadButton="true"
  >
  <Axis
  slot="axisLeft"

src/components/plots/ScatterPlot.vue

@@ -301,7 +301,7 @@ export default {
  /*
  * Scale up the canvas
  */
- var canvas;
+ let canvas;
  if(d3Node) {
  canvas = d3Node;
  } else {

src/components/plots/StackedBarPlot.vue

@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { stack as d3_stack, stackOrderNone as d3_stackOrderNone, stackOffsetNone as d3_stackOffsetNone } from 'd3-shape';
@@ -221,7 +222,7 @@ export default {
  this.highlightX1 = null;
  this.highlightX2 = null;
  },
- drawPlot() {
+ drawPlot(d3Node) {
  const vm = this;
 
  if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -277,21 +278,29 @@ export default {
  /*
  * Scale up the canvas
  */
- const canvas = d3_select(this.plotSelector);
- const context = canvas.node().getContext('2d');
+
+ let canvas;
+ if(d3Node) {
+ canvas = d3Node;
+ } else {
+ canvas = d3_select(this.plotSelector);
+ }
+
+ const canvasNode = canvas.node();
+
+ const two = new Two({ 
+ width: vm.pWidth, 
+ height: vm.pHeight, 
+ domElement: canvasNode
+ });
 
  const canvasHidden = d3_select(this.hiddenPlotSelector);
  const contextHidden = canvasHidden.node().getContext('2d');
 
- const ratio = getRetinaRatio(context);
+ const ratio = getRetinaRatio(contextHidden);
  const scaledWidth = vm.pWidth * ratio;
  const scaledHeight = vm.pHeight * ratio;
 
- canvas
- .attr("width", scaledWidth)
- .attr("height", scaledHeight);
- context.scale(ratio, ratio);
-
  canvasHidden
  .attr("width", scaledWidth)
  .attr("height", scaledHeight);
@@ -329,8 +338,9 @@ export default {
  barMarginX = 0;
  }
 
+ const twoRectArray = [];
+
  series.forEach((layer) => {
- context.fillStyle = cScale.color(layer["key"]); 
  layer.forEach((d) => {
  const col = genColor();
  colToNode[col] = { "x": d.data[vm.x], "y": d.data[layer["key"]], "c": layer["key"] };
@@ -339,15 +349,31 @@ export default {
  if(height + y(d[1]) > vm.pHeight) {
  height = vm.pHeight - y(d[1]);
  }
- context.fillRect(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
+
+ const rect = two.makeRectangle(x(d.data[vm.x]) + (barMarginX/2) + ((barWidth - barMarginX)/2), y(d[1]) + (height/2), barWidth - barMarginX, height);
+ //console.log(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
+ rect.fill = cScale.color(layer["key"]);
+ twoRectArray.push(rect);
+
  contextHidden.fillRect(x(d.data[vm.x]), y(d[1]), barWidth, height);
  })
  });
+
+ const twoRectGroup = two.makeGroup(twoRectArray);
+ twoRectGroup.linewidth = 0;
+ twoRectGroup.opacity = 1;
+ twoRectGroup.noStroke();
+
+ two.update();
+
+ if(!canvas) {
+ /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+ return;
+ }
  
  /*
  * Listen for mouse events
  */
- const canvasNode = canvas.node();
 
  const getDataFromMouse = (mouseX, mouseY) => {
  // Get the corresponding pixel color on the hidden canvas

src/components/plots/StratifiedSinaPlot.vue

@@ -89,14 +89,15 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { min as d3_min, max as d3_max, mean as d3_mean, histogram as d3_histogram } from 'd3-array';
 
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, seededRandom, getDelaunay } from './../../helpers.js';
+import { seededRandom, getDelaunay } from './../../helpers.js';
 
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -317,7 +318,7 @@ export default {
  this.highlightX2 = null;
  this.highlightY1 = null;
  },
- drawPlot() {
+ drawPlot(d3Node) {
  const vm = this;
 
  if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -352,17 +353,20 @@ export default {
  /*
  * Scale up the canvas
  */
- const canvas = d3_select(this.plotSelector);
- const context = canvas.node().getContext('2d');
+ let canvas;
+ if(d3Node) {
+ canvas = d3Node;
+ } else {
+ canvas = d3_select(this.plotSelector);
+ }
 
- const ratio = getRetinaRatio(context);
- const scaledWidth = vm.pWidth * ratio;
- const scaledHeight = vm.pHeight * ratio;
+ const canvasNode = canvas.node();
 
- canvas
- .attr("width", scaledWidth)
- .attr("height", scaledHeight);
- context.scale(ratio, ratio);
+ const two = new Two({ 
+ width: vm.pWidth, 
+ height: vm.pHeight, 
+ domElement: canvasNode
+ });
 
  /*
  * Get the random number generator.
@@ -379,18 +383,12 @@ export default {
  * Draw the boxes
  */
 
+ const twoCircleArray = [];
+
  const boxWidth = (barWidth / 2);
  const boxMargin = barWidth / 4;
 
- if(vm.strokeColor !== undefined) {
- context.strokeStyle = vm.strokeColor;
- }
  xScale.domainFiltered.forEach((boxVar) => {
- if(vm.strokeColor === undefined) {
- context.strokeStyle = xScale.color(boxVar);
- }
- context.fillStyle = xScale.color(boxVar);
-
  let boxData = data.filter((dEl) => {
  let sEl = stratificationData.find((sEl) => sEl[vm.o] === dEl[vm.o]);
  return (sEl !== undefined && sEl[vm.x] === boxVar);
@@ -433,14 +431,14 @@ export default {
 
  bins.forEach((binData) => {
  binData.forEach((d) => {
- context.beginPath();
- let xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
- let yVal = y(d[vm.variable]);
- context.arc(xVal, yVal, vm.pointSize, 0, 2*Math.PI);
- context.stroke();
- if(vm.fillPoints) {
- context.fill(); 
- }
+ const xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
+ const yVal = y(d[vm.variable]);
+ 
+ const circle = two.makeCircle(xVal, yVal, vm.pointSize);
+ circle.stroke = (vm.strokeColor ? vm.strokeColor : xScale.color(boxVar));
+ circle.fill = xScale.color(boxVar);
+
+ twoCircleArray.push(circle);
 
  points.push([xVal, yVal]); // For Delaunay
  pointsData.push({
@@ -451,14 +449,27 @@ export default {
  });
  });
  });
+
+ const twoCircleGroup = two.makeGroup(twoCircleArray);
+ twoCircleGroup.linewidth = 1;
+ twoCircleGroup.opacity = 1;
+
+ if(!vm.fillPoints) {
+ twoCircleGroup.noFill();
+ }
+
+ two.update();
+
+ if(!canvas) {
+ /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+ return;
+ }
  
  const delaunay = getDelaunay(points, false);
 
  /*
  * Listen for mouse events
  */
- const canvasNode = canvas.node();
-
  const getDataFromMouse = (mouseX, mouseY) => {
  const i = delaunay.find(mouseX, mouseY);
  return pointsData[i];