Start reducing d3 dependencies

src/main/CoverageTrack.js

@@ -107,7 +107,7 @@ class CoverageTrack extends React.Component {
 
     // Hold off until height & width are known.
     if (width === 0) return;
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
 
     var yScale = d3.scale.linear()
       .domain([this.state.maxCoverage, 0])

src/main/GeneTrack.js

@@ -119,7 +119,7 @@ var GeneTrack = React.createClass({
             .range([0, width])
             .clamp(true);
 
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
 
     var ctx = dataCanvas.getDataContext(canvasUtils.getContext(canvas));
     ctx.reset();

src/main/GenomeTrack.js

@@ -54,7 +54,7 @@ var GenomeTrack = React.createClass({
 
     // Hold off until height & width are known.
     if (width === 0) return;
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
 
     var scale = this.getScale();
     var pxPerLetter = scale(1) - scale(0);

src/main/LocationTrack.js

@@ -49,7 +49,7 @@ class LocationTrack extends React.Component {
         {range, width, height} = this.props,
         scale = this.getScale();
 
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
 
     var ctx = dataCanvas.getDataContext(canvasUtils.getContext(this.getDOMNode()));
     ctx.save();

src/main/PileupTrack.js

@@ -265,7 +265,7 @@ class PileupTrack extends React.Component {
     // Height can only be computed after the pileup has been updated.
     var height = yForRow(this.cache.pileupHeightForRef(this.props.range.contig));
 
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
 
     var ctx = canvasUtils.getContext(canvas);
     var dtx = dataCanvas.getDataContext(ctx);

src/main/ScaleTrack.js

@@ -4,7 +4,7 @@
  * mbp or gbp depending on the size of the view and also tries to round the
  * scale size (e.g. prefers "1,000 bp", "1,000 kbp" over "1 kbp" and "1 mbp")
  *
- *           ---------- 30 chars ----------
+ *           <---------- 30 bp ---------->
  *
  * @flow
  */
@@ -51,7 +51,7 @@ class ScaleTrack extends React.Component {
     var canvas = this.getDOMNode(),
         {range, width, height} = this.props;
 
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
 
     var ctx = dataCanvas.getDataContext(canvasUtils.getContext(canvas));
     ctx.save();

src/main/VariantTrack.js

@@ -58,7 +58,7 @@ var VariantTrack = React.createClass({
     // Hold off until height & width are known.
     if (width === 0) return;
 
-    d3.select(canvas).attr({width, height});
+    d3utils.setAttributes(canvas, {width, height});
     var ctx = canvasUtils.getContext(canvas);
     var dtx = dataCanvas.getDataContext(ctx);
     this.renderScene(dtx);

src/main/d3utils.js

@@ -33,7 +33,18 @@ function formatRange(viewSize: number): any {
   return {prefix, unit};
 }
 
+/**
+ * Set attributes on an element. This can be used in place of, e.g.
+ * d3.select(div).attr({width, height});
+ */
+function setAttributes(el: Element, attrs: {[key:string]: any}) {
+  for (var k in attrs) {
+    el.setAttribute(k, attrs[k]);
+  }
+}
+
 module.exports = {
   formatRange,
-  getTrackScale
+  getTrackScale,
+  setAttributes
 };

src/test/CoverageTrack-test.js

@@ -9,8 +9,7 @@
 var expect = require('chai').expect;
 
 var Q = require('q'),
-    _ = require('underscore'),
-    d3 = require('d3');
+    _ = require('underscore');
 
 import type * as SamRead from '../main/SamRead';
 

src/test/PileupTrack-test.js

@@ -8,8 +8,7 @@
 var expect = require('chai').expect;
 
 var Q = require('q'),
-    _ = require('underscore'),
-    d3 = require('d3');
+    _ = require('underscore');
 
 import type * as SamRead from '../main/SamRead';
 

src/test/d3utils-test.js

@@ -2,7 +2,6 @@
 'use strict';
 
 var expect = require('chai').expect;
-var d3 = require('d3');
 var d3utils = require('../main/d3utils');
 
 describe('d3utils', function() {