Adding support for absolute position in pixels for coordinate #22

romsson · Jan 3, 2018 · d6c766b · d6c766b
1 parent 1271d75
commit d6c766b
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 0 deletions.
diff --git a/example/coordinate-px.html b/example/coordinate-px.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+body {
+  font-family: Helvetica;
+  font-size: 10px;
+}
+rect {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+}
+</style>
+<body>
+<script src="../node_modules/d3/build/d3.js"></script>
+<script src="../build/d3-gridding.js"></script>
+<script>
+
+var width = 400,
+    height = 400;
+
+var gridding = d3.gridding()
+  .size([width, height])
+  .valueX("x")
+  .valueY("y")
+  .prefix("__")
+  .mode("coordinate");
+
+var data = [
+  {x: "0px", y: "0px", h: "200px", w: "200px"},
+  {x: "200px", y: "200px", h: "200px", w: "200px"}
+];
+
+var griddingData = gridding(data);
+
+var svgSquares = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g");
+
+svgSquares.selectAll(".square")
+    .data(griddingData)
+  .enter().append("rect")
+    .attr("class", "square")
+      .attr("width", function(d) { return d.__width; })
+      .attr("height", function(d) { return d.__height; })
+      .attr("transform", function(d) { return "translate(" + d.__x + "," + d.__y + ")"; })
+
+svgSquares.selectAll(".index")
+    .data(griddingData)
+  .enter().append("text")
+    .attr("class", "index")
+    .style('text-anchor', 'middle')
+    .style('dominant-baseline', 'central')
+    .attr("transform", function(d) { return "translate(" + d.__cx + "," + d.__cy + ")"; })
+    .text(function(d, i) { return d.x + " x " + d.y; });
+
+</script>
diff --git a/src/modes/coordinate.js b/src/modes/coordinate.js
@@ -8,6 +8,9 @@ export default function(nodes, v) {
   if(!v.valueX) {
     _valueX = function() { return Math.random(); }
     _valueXmax = 1;
+  } else if(typeof v.valueX === "function" && typeof v.valueX(nodes[0]) === "string" && v.valueX(nodes[0]).indexOf("px") === v.valueX(nodes[0]).length - 2) {
+    _valueX = function(d) { return +v.valueX(d).replace("px", ""); }
+    _valueXmax = v.size[0];
   } else if(typeof v.valueX === "string") {
     _valueX = function(d) { return d[v.valueX]; }
     _valueXmax = d3Array.max(nodes, _valueX);
@@ -24,6 +27,9 @@ export default function(nodes, v) {
   if(!v.valueY) {
     _valueY = function() { return Math.random(); }
     _valueYmax = 1;
+  } else if(typeof v.valueY === "function" && typeof v.valueY(nodes[0]) === "string" && v.valueY(nodes[0]).indexOf("px") === v.valueY(nodes[0]).length - 2) {
+    _valueY = function(d) { return +v.valueY(d).replace("px", ""); }
+    _valueYmax = v.size[1];
   } else if(typeof v.valueY === "string") {
     _valueY = function(d) { return d[v.valueY]; }
     _valueYmax = d3Array.max(nodes, _valueY)
@@ -73,6 +79,8 @@ export default function(nodes, v) {
   // v.height.range([0, v.size[1] - v.height(_valueHeight(nodes[0]))]);
 
   nodes.forEach(function(n) {
+
+
     n[v.__x] = v.x(_valueX(n)) + v.offset[0] + v.padding;
     n[v.__y] = v.y(_valueY(n)) + v.offset[1] + v.padding;
 
@@ -81,6 +89,7 @@ export default function(nodes, v) {
 
     n[v.__cx] = n[v.__x] + n[v.__width] / 2;
     n[v.__cy] = n[v.__y] + n[v.__height] / 2;
+
   });
 
   return nodes;

diff --git a/test/coordinate-test.js b/test/coordinate-test.js
@@ -17,3 +17,19 @@ tape("coordinate layout should return full dimension when alone", function(test)
   test.end();
 });
 
+tape("coordinate layout set in pixel", function(test) {
+
+  var nodes = [{"id": "A", "coordX": "10px", "coordY": "20px"}];
+
+  var grid = gridding.gridding().mode("coordinate").size([10, 20])
+    .valueX("coordX")
+    .valueY("coordY")
+
+  test.deepEqual(grid(nodes)[0]["x"], 10);
+  test.deepEqual(grid(nodes)[0]["y"], 20);
+  test.deepEqual(grid(nodes)[0]["width"], 10);
+  test.deepEqual(grid(nodes)[0]["height"], 20);
+
+  test.end();
+});
+