AIL-framework/var/www/static/js/d3/graphlinesgroup.js

133 lines
3.6 KiB
JavaScript

//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
}