mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 00:28:22 +00:00
fix: [d3 js plugin]
This commit is contained in:
parent
ccdcfcd954
commit
55f4b72054
2 changed files with 132 additions and 0 deletions
132
var/www/static/js/d3/graphlinesgroup.js
vendored
Normal file
132
var/www/static/js/d3/graphlinesgroup.js
vendored
Normal file
|
@ -0,0 +1,132 @@
|
|||
//Requirement: - D3v5
|
||||
// - jquery
|
||||
// data input: var data = [{"name": "Name1","Data": [{"date": "20191101","value": "35"},{"date": "20191102","value": "12"}]},
|
||||
// {"name": "Name2","Data": [{"date": "20191101","value": "23"},{"date": "20191102","value": "34"}]}
|
||||
|
||||
const multilines_group = (container_id, data, options) => {
|
||||
|
||||
const defaults = {
|
||||
style: {
|
||||
stroke: "rgb(0, 0, 0)",
|
||||
strokeWidth: 2,
|
||||
strokeWidthHover: 4.5
|
||||
},
|
||||
margin: {top:5, right:150, bottom:40, left:40},
|
||||
width: 700,
|
||||
height: 400
|
||||
};
|
||||
|
||||
options = $.extend(true, defaults, options);
|
||||
|
||||
let width_graph = options.width - options.margin.left - options.margin.right;
|
||||
let height_graph = options.height - options.margin.top - options.margin.bottom;
|
||||
|
||||
let parseDate = d3.timeParse("%Y%m%d");
|
||||
|
||||
let x = d3.scaleTime()
|
||||
.range([0, width_graph]);
|
||||
|
||||
let y = d3.scaleLinear()
|
||||
.range([height_graph, 0]);
|
||||
|
||||
let color = d3.scaleOrdinal(d3.schemeCategory10);
|
||||
color.domain(data.map(function (d) { return d.name; }));
|
||||
|
||||
let xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%m-%d"));
|
||||
let yAxis = d3.axisLeft(y);
|
||||
|
||||
let line = d3.line()
|
||||
.x(function (d) {
|
||||
return x(d.date);
|
||||
})
|
||||
.y(function (d) {
|
||||
return y(d.value);
|
||||
});
|
||||
|
||||
data.forEach(function (kv) {
|
||||
kv.Data.forEach(function (d) {
|
||||
d.date = parseDate(d.date);
|
||||
});
|
||||
});
|
||||
|
||||
let cities = data;
|
||||
|
||||
let minX = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.date; }) });
|
||||
let maxX = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.date; }) });
|
||||
let minY = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.value; }) });
|
||||
let maxY = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.value; }) });
|
||||
|
||||
x.domain([minX, maxX]);
|
||||
y.domain([minY, maxY]);
|
||||
|
||||
let svg = d3.select("#"+container_id)
|
||||
.append("svg")
|
||||
.attr("width", options.width)
|
||||
.attr("height", options.height)
|
||||
.append("g")
|
||||
.attr("transform", "translate("+options.margin.left+","+options.margin.top+")");
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + height_graph + ")")
|
||||
.call(xAxis)
|
||||
.selectAll("text")
|
||||
.style("text-anchor", "end")
|
||||
.attr("dx", "-.8em")
|
||||
.attr("dy", ".15em")
|
||||
.attr("transform", "rotate(-65)");
|
||||
|
||||
svg.append("g")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end");
|
||||
|
||||
let name = svg.selectAll(".name")
|
||||
.data(cities)
|
||||
.enter().append("g")
|
||||
|
||||
name.append("path")
|
||||
.attr("d", function (d) {
|
||||
return line(d.Data);
|
||||
})
|
||||
.style("fill", "none")
|
||||
.style("stroke-width", options.style.strokeWidth)
|
||||
.style("stroke", function (d) {
|
||||
return color(d.name);
|
||||
})
|
||||
.on("mouseover", function(d) {
|
||||
d3.select(this).style("stroke-width", options.style.strokeWidthHover);
|
||||
})
|
||||
.on("mouseout", function(d) {
|
||||
d3.select(this).style("stroke-width", options.style.strokeWidth)
|
||||
.style("stroke", function (d) {
|
||||
return color(d.name);
|
||||
})
|
||||
});
|
||||
|
||||
name.append("text")
|
||||
.datum(function (d) {
|
||||
return {
|
||||
name: d.name,
|
||||
date: d.Data[d.Data.length - 1].date,
|
||||
value: d.Data[d.Data.length - 1].value
|
||||
};
|
||||
})
|
||||
.attr("transform", function (d) {
|
||||
return "translate(" + x(d.date) + "," + y(d.value) + ")";
|
||||
})
|
||||
.attr("x", 3)
|
||||
.attr("dy", ".35em")
|
||||
.style("stroke", function (d) {
|
||||
return color(d.name);
|
||||
})
|
||||
.style("stroke-width", 0.5)
|
||||
.text(function (d) {
|
||||
return d.name;
|
||||
});
|
||||
|
||||
return svg
|
||||
|
||||
}
|
Loading…
Reference in a new issue