tmp2

index.js

@@ -1,7 +1,5 @@
 
-var all_data_points = []
-
-// all_data_points = [ [[x1,y1],[x2,y2],[another point]], [another chart] ]
+var all_data_points = []; // all_data_points = [ [[x1,y1],[x2,y2],[another point]], [another chart] ]
 
 // gather all data
 d3.selectAll("line-chart").each( function () {
@@ -9,14 +7,91 @@ d3.selectAll("line-chart").each( function () {
     all_data_points.push(JSON.parse(ele.attr("data-points")))
 })
 
+var list_line_chart = d3.selectAll("line-chart").data(all_data_points)
 
-// ele_line_chart.append(".chart-clean-box").style({"padding":0}).node().getBoundingClientRect()
-
-var list_ele_clean_box = d3.selectAll("line-chart").append("div").classed("chart-clean-box",true).attr("padding",0).data(all_data_points)
-
-list_ele_clean_box.each( function (data_chart, index_chart) {
+// create each chart
+list_line_chart.each( function (data_chart, index_chart) {
 	var ele_chart = d3.select(this);
-	var bbox = this.getBoundingClientRect();
 
-	ele_chart.data(data_chart).append("svg").width(bbox.width).height(bbox.height)
+    // decide height to set
+	var parent_bbox = this.parentNode.getBoundingClientRect();
+    var parent_width = parent_bbox.width;
+    var parent_height = parent_bbox.height;
+    if (parent_width === 0 && parent_height === 0)
+    {
+        parent_width = 450
+        parent_height = 300
+    }
+    else
+    {
+        if (parent_width === 0)
+        {
+            parent_width = parent_height*1.5;   
+        }
+        if (parent_height === 0)
+        {
+            parent_height = parent_width/1.5;   
+        }
+    }
+
+    // prepare scales
+    var xscale = d3.scaleLinear().
+    // set domain with an immediately invoked function
+    domain(function (arr_point) {
+        var max_val = d3.max(arr_point,function (point) {
+            return point[0];
+        })
+        var min_val = 0;
+        return [min_val,max_val];
+    }(data_chart)).
+    // set region to svg width and height
+    range([0,parent_width])
+
+    var yscale = d3.scaleLinear().
+    // set domain with an immediately invoked function
+    domain(function (arr_point) {
+        var max_val = d3.max(arr_point,function (point) {
+            return point[1];
+        })
+        var min_val = 0;
+        return [min_val,max_val];
+    }(data_chart)).
+    // set region to svg width and height
+    range([parent_height,0])
+
+	var ele_svg = ele_chart.append("svg");
+    
+    ele_svg.attr("width",parent_width).attr("height",parent_height).
+    selectAll("circle").data(function(d) {return d;}).enter().append("circle").
+        attr("r",5).
+        attr("cx",function (d) {return xscale(d[0]);}).
+        attr("cy",function (d) {return yscale(d[1]);})
+
+    ele_svg.selectAll("line").data(function(d){
+        return d.map(function (val,index,arr) {
+            if (index < arr.length - 1)
+            {
+                return [arr[index],arr[index+1]]
+            }
+            else
+            {
+                return undefined;
+            }
+        }).filter(function (val) {
+            return (val !== undefined);
+        })
+
+    }).
+    enter().append("line").
+    attrs({
+        "x1": function(two_points){return xscale(two_points[0][0]);},
+        "y1": function(two_points){return yscale(two_points[0][1]);},
+        "x2": function(two_points){return xscale(two_points[1][0]);},
+        "y2": function(two_points){return yscale(two_points[1][1]);},
+    }).
+    attrs({
+        "stroke":"black",
+        "stroke-width":"2"
+    })
+
 })