diff --git a/d3-selection-multi.v0.4.min.js b/d3-selection-multi.v0.4.min.js
new file mode 100644
index 0000000..c8c7042
--- /dev/null
+++ b/d3-selection-multi.v0.4.min.js
@@ -0,0 +1,2 @@
+// https://github.com/d3/d3-selection-multi Version 0.4.1. Copyright 2016 Mike Bostock.
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("d3-selection"),require("d3-transition")):"function"==typeof define&&define.amd?define(["d3-selection","d3-transition"],n):n(t.d3,t.d3)}(this,function(t,n){"use strict";function r(n,r){return n.each(function(){var n=r.apply(this,arguments),e=t.select(this);for(var i in n)e.attr(i,n[i])})}function e(t,n){for(var r in n)t.attr(r,n[r]);return t}function i(t){return("function"==typeof t?r:e)(this,t)}function o(n,r,e){return n.each(function(){var n=r.apply(this,arguments),i=t.select(this);for(var o in n)i.style(o,n[o],e)})}function f(t,n,r){for(var e in n)t.style(e,n[e],r);return t}function u(t,n){return("function"==typeof t?o:f)(this,t,null==n?"":n)}function s(n,r){return n.each(function(){var n=r.apply(this,arguments),e=t.select(this);for(var i in n)e.property(i,n[i])})}function c(t,n){for(var r in n)t.property(r,n[r]);return t}function a(t){return("function"==typeof t?s:c)(this,t)}function p(n,r){return n.each(function(){var e=r.apply(this,arguments),i=t.select(this).transition(n);for(var o in e)i.attr(o,e[o])})}function l(t,n){for(var r in n)t.attr(r,n[r]);return t}function y(t){return("function"==typeof t?p:l)(this,t)}function h(n,r,e){return n.each(function(){var i=r.apply(this,arguments),o=t.select(this).transition(n);for(var f in i)o.style(f,i[f],e)})}function v(t,n,r){for(var e in n)t.style(e,n[e],r);return t}function d(t,n){return("function"==typeof t?h:v)(this,t,null==n?"":n)}t.selection.prototype.attrs=i,t.selection.prototype.styles=u,t.selection.prototype.properties=a,n.transition.prototype.attrs=y,n.transition.prototype.styles=d});
\ No newline at end of file
diff --git a/index.html b/index.html
index b19919c..21e036e 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,12 @@
Line Chart
+
-
+
diff --git a/index.js b/index.js
index 3a365c7..9a4cf20 100644
--- a/index.js
+++ b/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"
+ })
+
})
\ No newline at end of file