modularize parallel coords setup

2026-09-20 21:16:08 +08:00 · 2017-11-07 11:51:24 -08:00
parent e41da4f233
commit b54cc122be
1 changed files with 42 additions and 0 deletions
@@ -0,0 +1,42 @@
+/*****************************************
+******************************************
+      Setup SVG & Canvas elements
+******************************************
+******************************************/
+
+const setupParallelCoordinates = (
+  width,
+  height,
+  margin
+) => {
+
+  var container = d3.select("#parcoords")
+
+  var svg = container.append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+  var canvas = container.append("canvas")
+      .attr("width", width * devicePixelRatio)
+      .attr("height", height * devicePixelRatio)
+      .style("width", width + "px")
+      .style("height", height + "px")
+      .style("margin-top", margin.top + "px")
+      .style("margin-left", margin.left + "px");
+
+  var ctx = canvas.node().getContext("2d");
+      ctx.globalCompositeOperation = 'darken';
+      ctx.globalAlpha = 0.15;
+      ctx.lineWidth = 1.5;
+      ctx.scale(devicePixelRatio, devicePixelRatio);
+
+  return {
+    svg,
+    ctx,
+  }
+
+}
+
+export default setupParallelCoordinates