Restructure trellis-chart DOM, add separators

2 files changed, 82 insertions, 33 deletions

diff --git a/public/css/style.css b/public/css/style.css
index e886b0d..51b21df 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -121,7 +121,7 @@ h3 {
 
 /* Stat chart */
 
-#stat-chart svg g g.column .border-line {
+#stat-chart .border-line {
   fill: none;
   stroke: #ccc;
   opacity: .5;
diff --git a/public/js/util/trellis-chart.js b/public/js/util/trellis-chart.js
index 6a9c1de..ae25421 100644
--- a/public/js/util/trellis-chart.js
+++ b/public/js/util/trellis-chart.js
@@ -1,11 +1,15 @@
 "use strict";
 function trellisChart(anchor, monoGroups) {
+  /*
+   * FIXME: There is a lot of hardcoding going on in here.
+   */
   /* attr -> {dim, group} key -> str amount, value -> { str, agi, vit, dex, int, luk } */
-
+  /* Array of all attribute names */
   var attrs = monoGroups.map(function(d) { return d.name; });
   var attrsIdByName = {};
   monoGroups.forEach(function(d, i) { attrsIdByName[d.name] = i; });
 
+  /* Parameters. FIXME: Tightly coupled magic numbers everywhere. */
   var cellWidth = 5;
   var radius = cellWidth / 2;
   var subChartLength = 57;
@@ -20,21 +24,82 @@ function trellisChart(anchor, monoGroups) {
   var _chart = function() {
     if (g.empty()) {
       /* Make stuff! */
-      var svg = anchor.append("svg");
-      g = svg
-        .append("g");
-      attrs.forEach(function(d, i) {
-        g
-          .append("text")
-          .attr("transform", function(d) { return "translate(0," + ((attrs.length - i) * subChartLength + 10 - subChartLength / 2) + ")"; })
-          .text(d)
-        ;
-        g
-          .append("text")
-          .attr("transform", function(d) { return "translate(" + (i * subChartLength + 25 + 22) + "," + (attrs.length * subChartLength + 18) + ")"; })
-          .text(d)
-        ;
-      })
+      var svg = anchor.append("svg").attr("height", 400);
+      /* Group of dimension labels. */
+      var dimLabelsG = svg
+        .append("g")
+        .attr("transform", "translate(" + (margin.left + 25 + 2) + "," + (margin.top) + ")")
+      ;
+      var dimLabels;
+      /* Subchart separators */
+      var sepOrigin = -cellWidth
+        , sepLineLen = subChartLength * attrs.length - subChartPadding
+      ;
+      dimLabels = dimLabelsG.selectAll("g.yAxisDimLabel")
+        .data(attrs)
+      ;
+      dimLabels.enter().append("g").attr("class", "yAxisDimLabel")
+        .attr("transform", function(d, i) { return "translate(0," + (attrs.length - i) * subChartLength + ")"; })
+        .each(function(d, i) {
+          var t = d3.select(this);
+          t
+            .append("text")
+            .attr("transform", "translate(-25," + (-subChartUnpaddedLength / 2) + ")")
+            .text(d)
+          ;
+          /* Top subchart separators */
+          t
+            .append("line")
+            .attr("x1", sepOrigin)
+            .attr("x2", sepOrigin + sepLineLen)
+            .attr("y1", sepOrigin)
+            .attr("y2", sepOrigin)
+            .attr("class", "border-line")
+          ;
+          /* Bottom subchart separators */
+          t
+            .append("line")
+            .attr("x1", sepOrigin)
+            .attr("x2", sepOrigin + sepLineLen)
+            .attr("y1", sepOrigin - subChartUnpaddedLength)
+            .attr("y2", sepOrigin - subChartUnpaddedLength)
+            .attr("class", "border-line")
+          ;
+        })
+      ;
+      dimLabels = dimLabelsG.selectAll("g.xAxisDimLabel")
+        .data(attrs)
+      ;
+      dimLabels.enter().append("g").attr("class", "xAxisDimLabel")
+        .attr("transform", function(d, i) { return "translate(" + (i * subChartLength) + "," + (attrs.length * subChartLength) + ")"; })
+        .each(function(d, i) {
+          var t = d3.select(this);
+          t
+            .append("text")
+            .attr("transform", "translate("+ (subChartUnpaddedLength / 2 - 12) + ",8)")
+            .text(d)
+          ;
+          /* Left subchart separators */
+          t
+            .append("line")
+            .attr("x1", sepOrigin)
+            .attr("x2", sepOrigin)
+            .attr("y1", sepOrigin)
+            .attr("y2", sepOrigin - sepLineLen)
+            .attr("class", "border-line")
+          ;
+          /* Right subchart separators */
+          t
+            .append("line")
+            .attr("x1", sepOrigin + subChartUnpaddedLength)
+            .attr("x2", sepOrigin + subChartUnpaddedLength)
+            .attr("y1", sepOrigin)
+            .attr("y2", sepOrigin - sepLineLen)
+            .attr("class", "border-line")
+          ;
+        })
+      ;
+      /* Group of subcharts. */
       g = svg
         .append("g")
           .attr("transform", "translate(" + (margin.left + 25) + "," + (margin.top) + ")");
@@ -51,22 +116,6 @@ function trellisChart(anchor, monoGroups) {
         .attr("class", "column")
         .attr("transform", function(d) { return "translate(" + (attrsIdByName[d.name] * subChartLength) + ",0)"; })
       ;
-    colE
-      .append("line")
-        .attr("x1", -cellWidth)
-        .attr("x2", -cellWidth)
-        .attr("y1", -cellWidth)
-        .attr("y2", subChartLength * attrs.length - subChartPadding)
-        .attr("class", "border-line")
-      ;
-    colE
-      .append("line")
-        .attr("x1", subChartUnpaddedLength)
-        .attr("x2", subChartUnpaddedLength)
-        .attr("y1", -cellWidth)
-        .attr("y2", subChartLength * attrs.length - subChartPadding)
-        .attr("class", "border-line")
-      ;
     /* Each stat has an array for its value. Group these to find the x position. */
     /*
      * The function transforms the data to take the grouping. We can consider each x position grouping to have data in the following format: