mirror of
https://github.com/bendtherules/line_chart_demo.git
synced 2026-08-18 13:52:30 +00:00
tmp2
This commit is contained in:
Vendored
+2
@@ -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});
|
||||||
+2
-1
@@ -5,11 +5,12 @@
|
|||||||
<title>Line Chart</title>
|
<title>Line Chart</title>
|
||||||
<link rel="stylesheet" href="index.css">
|
<link rel="stylesheet" href="index.css">
|
||||||
<script type="text/javascript" src="d3.v4.min.js"></script>
|
<script type="text/javascript" src="d3.v4.min.js"></script>
|
||||||
|
<script type="text/javascript" src="d3-selection-multi.v0.4.min.js"></script>
|
||||||
<script type="text/javascript" src="jquery.min.js"></script>
|
<script type="text/javascript" src="jquery.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<line-chart data-points="[[20,200],[3,4],[6,5],[40,3]]"></line-chart>
|
<line-chart data-points="[[3,4],[6,5],[20,70],[40,30]]"></line-chart>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript" src="index.js"></script>
|
<script type="text/javascript" src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
|
|
||||||
var all_data_points = []
|
var all_data_points = []; // all_data_points = [ [[x1,y1],[x2,y2],[another point]], [another chart] ]
|
||||||
|
|
||||||
// all_data_points = [ [[x1,y1],[x2,y2],[another point]], [another chart] ]
|
|
||||||
|
|
||||||
// gather all data
|
// gather all data
|
||||||
d3.selectAll("line-chart").each( function () {
|
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")))
|
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()
|
// create each chart
|
||||||
|
list_line_chart.each( function (data_chart, index_chart) {
|
||||||
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) {
|
|
||||||
var ele_chart = d3.select(this);
|
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"
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user