Fix issues with the graph being cut off

clarabstract · May 7, 2017 · d4f987c · d4f987c
1 parent 6ba31fc
commit d4f987c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/calc.css b/calc.css
@@ -174,3 +174,9 @@ a.closeLink {
 	color: red;
 	margin-bottom: 10px;
 }
+
+.graph {
+	overflow-x: auto;
+	border: 1px solid lightgray;
+	padding: 5px;
+}
diff --git a/graph.jsx b/graph.jsx
@@ -47,20 +47,21 @@ var update = function(props) {
       // Center the graph. Skip if graph is empty.
       if (i > 0) {
         var svgGroup = me;
-        var svg = d3.select("svg");
-        var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
-        svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
-        svg.attr("height", g.graph().height + 40);
+        var svg = d3.select("svg");        
+        svgGroup.attr("transform", "translate(50, 5)");
+        svg.attr("width", g.graph().width + 100);
+        svg.attr("height", g.graph().height + 10);
       }
     };
 };
 
 App.Graph = React.createClass({
     render: function() {
-        return <svg width="960" height="600"></svg>;
+        return <div className="graph"><svg width="1" height="1"></svg></div>;
     },
     componentDidMount: function () {
         d3.select(ReactDOM.findDOMNode(this))
+            .select("svg")
             .append("g")
             .call(update(this.props));
     },