fix height resize problem (issue#13)

Author: kristw

src/AbstractChart.js

@@ -27,6 +27,9 @@ class AbstractChart {
     };
 
     this.container = select(selector);
+    // Enforce line-height = 0 to fix issue with height resizing
+    // https://github.com/twitter/d3kit/issues/13
+    this.container.style('line-height', 0);
 
     const customEvents = this.constructor.getCustomEventNames();
     this.setupDispatcher(customEvents);

src/AbstractChart.spec.js

@@ -28,8 +28,8 @@ describe('AbstractChart', () => {
           return ['custom1', 'custom2'];
         }
       }
-      const chart = new Chart();
-      expect(chart.getCustomEventNames()).to.deep.equal(['custom1', 'custom2']);
+      const chart2 = new Chart();
+      expect(chart2.getCustomEventNames()).to.deep.equal(['custom1', 'custom2']);
     });
   });
 

src/SvgChart.spec.js

@@ -2,13 +2,12 @@ import { select } from 'd3-selection';
 import SvgChart from './SvgChart.js';
 
 describe('SvgChart', () => {
-  let element, $element, $svg, chart;
+  let element, $element, chart;
 
   beforeEach(() => {
     element = document.body.appendChild(document.createElement('div'));
     chart = new SvgChart(element, null);
     $element = select(element);
-    $svg = $element.select('svg');
   });
 
   describe('new SvgChart(element, options)', () => {
@@ -68,39 +67,50 @@ describe('SvgChart', () => {
 
   describe('.width(width)', () => {
     it('should return <svg> width when called without argument', () => {
-      const w = $svg.attr('width');
+      const w = chart.svg.attr('width');
       expect(chart.width()).to.equal(+w);
     });
     it('should set <svg> width when called with Number as the first argument', () => {
       chart
         .width(300)
         .updateDimensionNow();
-      expect(+$svg.attr('width')).to.equal(300);
+      expect(+chart.svg.attr('width')).to.equal(300);
     });
   });
 
   describe('.height(height)', () => {
     it('should return <svg> height when called without argument', () => {
-      const w = $svg.attr('height');
+      const w = chart.svg.attr('height');
       expect(chart.height()).to.equal(+w);
     });
     it('should set <svg> height when called with Number as the first argument', () => {
       chart
         .height(300)
         .updateDimensionNow();
-      expect(+$svg.attr('height')).to.equal(300);
+      expect(+chart.svg.attr('height')).to.equal(300);
+    });
+    it('should override line-height and set <svg> height correctly', () => {
+      const element2 = document.body.appendChild(document.createElement('div'));
+      element2.style.lineHeight = 1;
+      const chart2 = new SvgChart(element2);
+      chart2
+        .height(300)
+        .updateDimensionNow();
+      expect(+chart2.svg.attr('height')).to.equal(300);
+      expect(+chart2.container.node().clientHeight).to.equal(300);
+      expect(+element2.style.lineHeight).to.equal(0);
     });
   });
 
   describe('.dimension(dimension)', () => {
     it('should return an array [width, height] when called without argument', () => {
-      const dim = [+$svg.attr('width'), +$svg.attr('height')];
+      const dim = [+chart.svg.attr('width'), +chart.svg.attr('height')];
       expect(chart.dimension()).to.deep.equal(dim);
     });
     it('should set width and height of the <svg> when called with an array [width, height] as the first argument', done => {
       chart.dimension([118, 118]);
       setTimeout(() => {
-        expect([+$svg.attr('width'), +$svg.attr('height')]).to.deep.equal([118, 118]);
+        expect([+chart.svg.attr('width'), +chart.svg.attr('height')]).to.deep.equal([118, 118]);
         done();
       }, 0);
     });