lib/graph-definitions/bar-vertical.js in grapht-0.1.8 vs lib/graph-definitions/bar-vertical.js in grapht-0.1.9

@@ -4,14 +4,17 @@
       height     = 400,
       svgWidth   = width + margin.right + margin.left,
       svgHeight  = height + margin.top + margin.bottom;
 
   var svg = d3.select("body").append("svg")
-             .style("fill", "none")
+             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
              .attr("width", svgWidth)
              .attr("height", svgHeight)
-             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
+             .style("font-family", "Arial")
+             .style("font-size", "14px")
+             .style("fill", "none")
+             .style("background-color", "#ffffff")
             .append('g')
               .attr('transform', 'translate(' +margin.left+ ',' +margin.top+ ')')
               .style("fill", "none");
 
   // Axis Scales
@@ -41,21 +44,19 @@
 
   svg.selectAll('.bar')
       .data(data)
     .enter().append('rect')
       .attr('class',    'bar')
-      .style('fill',    '#428bca')
-      .attr('opacity',  '0.3')
       .attr('y',        function(d) { return y(d.value); })
       .attr('x',        function(d) { return x(d.name); })
+      .attr('width',    x.rangeBand())
       .attr('height',   function(d) { return height - y(d.value); })
-      .attr('width',    x.rangeBand());
+      .style('fill',    '#428bca')
+      .style('opacity',  '0.3');
 
-  svg.selectAll('.text')
-    .attr('font-family', 'Arial')
-    .selectAll('label')
-      .attr('fill-opacity', '0.3')
+  svg.selectAll('label')
+      .style('fill-opacity', '0.3')
 
   var xAxisElement = svg.append('g')
                      .attr('class',      'x axis')
                      .attr('transform',  "translate(0," +height+ ")")
                      .call(xAxis);
@@ -65,25 +66,23 @@
                      .attr("transform", "translate(" +width+ ",0)")
                      .call(yAxis);
 
   xAxisElement.selectAll('line')
     .style('fill', 'none')
-    .attr('stroke', 'black')
-    .attr('stroke-width', '1px')
-    .attr('stroke-opacity', 0.1)
-    .attr('shape-rendering', 'geometricPrecision');
+    .style('stroke', 'black')
+    .style('stroke-width', '1px')
+    .style('stroke-opacity', 0.1)
+    .style('shape-rendering', 'geometricPrecision');
 
   xAxisElement.selectAll('text')
-    .style('fill', '#333333')
-    .attr('font-family', 'Arial');
+    .style('fill', '#333333');
 
   yAxisElement.selectAll('line')
     .style('fill', 'none')
-    .attr('stroke', 'black')
-    .attr('stroke-width', '1px')
-    .attr('stroke-opacity', 0.1)
-    .attr('shape-rendering', 'geometricPrecision');
+    .style('stroke', 'black')
+    .style('stroke-width', '1px')
+    .style('stroke-opacity', 0.1)
+    .style('shape-rendering', 'geometricPrecision');
 
   yAxisElement.selectAll('text')
-    .style('fill', '#333333')
-    .attr('font-family', 'Arial');
+    .style('fill', '#333333');
 }