diff --git a/src/main/resources/monitor.html b/src/main/resources/monitor.html
index 3c0134b..5aa7bd6 100644
--- a/src/main/resources/monitor.html
+++ b/src/main/resources/monitor.html
@@ -70,8 +70,8 @@
 const tree = d3.tree().size([2 * Math.PI, radius - 75]);
 
 const svg = d3.select('svg')
-  .style('width', width)
-  .style('height', height)
+  .style('width', width + 'px')
+  .style('height', height + 'px')
   .style('padding', '10px')
   .style('box-sizing', 'border-box')
   .style('font', 'sans-serif');
diff --git a/src/main/resources/monitor2.html b/src/main/resources/monitor2.html
index 806a702..5757dfb 100644
--- a/src/main/resources/monitor2.html
+++ b/src/main/resources/monitor2.html
@@ -174,8 +174,8 @@ <h2>
     .size([w, h - 100]);
 
 var vis = d3.select('body').append('svg:svg')
-    .attr('width', w)
-    .attr('height', h);
+    .attr('width', w + 'px')
+    .attr('height', h + 'px');
 
 function update() {
   var nodes = flatten(root),
diff --git a/src/main/resources/monitor3.html b/src/main/resources/monitor3.html
index f4b598b..e7e7745 100644
--- a/src/main/resources/monitor3.html
+++ b/src/main/resources/monitor3.html
@@ -135,8 +135,8 @@ <h2>
 }
 
 var svg = d3.select('body').append('svg:svg')
-    .attr('width', w)
-    .attr('height', h);
+    .attr('width', w + 'px')
+    .attr('height', h + 'px');
 
 function update() {
   // hack to get around problem with building g (group) child tags: circle and text
diff --git a/src/test/resources/d3v5-test.html b/src/test/resources/d3v5-test.html
index c7c0229..eda2c33 100644
--- a/src/test/resources/d3v5-test.html
+++ b/src/test/resources/d3v5-test.html
@@ -23,8 +23,8 @@
 <script>
 
 var svg = d3.select('svg'),
-    width = +svg.attr('width'),
-    height = +svg.attr('height');
+    width = +svg.attr('width' + 'px'),
+    height = +svg.attr('height' + 'px');
 
 function color(d) {
     if (d.data.type == 'cluster') {
diff --git a/src/test/resources/force-collapsible-labels.html b/src/test/resources/force-collapsible-labels.html
index c8d6741..56bf8b8 100644
--- a/src/test/resources/force-collapsible-labels.html
+++ b/src/test/resources/force-collapsible-labels.html
@@ -136,8 +136,8 @@ <h2>
 }
 
 var svg = d3.select('body').append('svg:svg')
-    .attr('width', w)
-    .attr('height', h);
+    .attr('width', w + 'px')
+    .attr('height', h + 'px');
 
 function update() {
   // hack to get around problem with building g (group) child tags: circle and text
diff --git a/src/test/resources/force-collapsible-old-working.html b/src/test/resources/force-collapsible-old-working.html
index dd1b8bd..1479e5a 100644
--- a/src/test/resources/force-collapsible-old-working.html
+++ b/src/test/resources/force-collapsible-old-working.html
@@ -165,8 +165,8 @@ <h2>
     .size([w, h - 100]);
 
 var vis = d3.select('body').append('svg:svg')
-    .attr('width', w)
-    .attr('height', h);
+    .attr('width', w + 'px')
+    .attr('height', h + 'px');
 
 // root = root();
 // root.fixed = true;
diff --git a/src/test/resources/force-collapsible-test.html b/src/test/resources/force-collapsible-test.html
index 45ee528..f0e0541 100644
--- a/src/test/resources/force-collapsible-test.html
+++ b/src/test/resources/force-collapsible-test.html
@@ -172,8 +172,8 @@ <h2>
     .size([w, h - 100]);
 
 var vis = d3.select('body').append('svg:svg')
-    .attr('width', w)
-    .attr('height', h);
+    .attr('width', w + 'px')
+    .attr('height', h + 'px');
 
 root = root();
 root.fixed = true;
diff --git a/src/test/resources/force-collapsible.html b/src/test/resources/force-collapsible.html
index 8d0c993..1455348 100644
--- a/src/test/resources/force-collapsible.html
+++ b/src/test/resources/force-collapsible.html
@@ -172,8 +172,8 @@ <h2>
     .size([w, h - 100]);
 
 var vis = d3.select('body').append('svg:svg')
-    .attr('width', w)
-    .attr('height', h);
+    .attr('width', w + 'px')
+    .attr('height', h + 'px');
 
 root = root();
 root.fixed = true;
diff --git a/src/test/resources/monitor.html b/src/test/resources/monitor.html
index c0ec224..174654c 100644
--- a/src/test/resources/monitor.html
+++ b/src/test/resources/monitor.html
@@ -73,8 +73,8 @@
 const tree = d3.tree().size([2 * Math.PI, radius - 75]);
 
 const svg = d3.select('svg')
-  .style('width', width)
-  .style('height', height)
+  .style('width', width + 'px')
+  .style('height', height + 'px')
   .style('padding', '10px')
   .style('box-sizing', 'border-box')
   .style('font', 'sans-serif');
diff --git a/src/test/resources/time-series-v3.html b/src/test/resources/time-series-v3.html
index a0d477b..78954c2 100644
--- a/src/test/resources/time-series-v3.html
+++ b/src/test/resources/time-series-v3.html
@@ -89,8 +89,8 @@
 
         var svg = d3.select('.graph').append('svg')
             .attr('class', 'chart')
-            .attr('width', width)
-            .attr('height', height + 50)
+            .attr('width', width + 'px')
+            .attr('height', (height + 50) + 'px')
 
         var axis = svg.append('g')
             .attr('class', 'x axis')
diff --git a/src/test/resources/time-series-v5.html b/src/test/resources/time-series-v5.html
index 7911a7c..f3f6116 100644
--- a/src/test/resources/time-series-v5.html
+++ b/src/test/resources/time-series-v5.html
@@ -65,8 +65,8 @@
 
     const svg = d3.select('.graph')
             .append('svg')
-                .attr('width', width)
-                .attr('height', height + 50); // add 50 to make room for X axis
+                .attr('width', width + 'px')
+                .attr('height', (height + 50) + 'px'); // add 50 to make room for X axis
 
     const gGraph = svg.append('g')
             .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
diff --git a/src/test/resources/tree1.html b/src/test/resources/tree1.html
index 64aee27..d9f1946 100644
--- a/src/test/resources/tree1.html
+++ b/src/test/resources/tree1.html
@@ -62,8 +62,8 @@
 const tree = d3.tree().size([2 * Math.PI, radius - 75]);
 
 const svg = d3.select('svg')
-  .style('width', width)
-  .style('height', height)
+  .style('width', width + 'px')
+  .style('height', height + 'px')
   .style('padding', '10px')
   .style('box-sizing', 'border-box')
   .style('font', 'sans-serif');