OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hw 3 done

Browse Source
This commit is contained in:
=
2026-03-27 14:21:57 +10:00
parent 76e3d0b5dd
commit 2869d51a52
3 changed files with 51 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
current_site/src/pages/graph.pug
View File

@@ -35,6 +35,7 @@ html(lang="ru")
select#graphType
option(value="0" selected) Точечная
option(value="1") Гистограма
option(value="2") График
button#drawButton Рисовать
br

85
current_site/src/pages/graph/chart.js
View File

@@ -20,8 +20,8 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
// создаем массив для построения графика
let arrGraph = createArrGraph(data, keyX);
if(keyX=="release"){
arrGraph = d3.sort(arrGraph, (x,y)=>Number(x["labelX"])-Number(y["labelX"]));
if (keyX == "release") {
arrGraph = d3.sort(arrGraph, (x, y) => Number(x["labelX"]) - Number(y["labelX"]));
}
const svg = d3.select("svg")
svg.selectAll('*').remove();
@@ -34,28 +34,30 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
marginY: 50
}
const scaleYDomain = [ d3.min(arrGraph.map(d => d.values[drawMin? 0:1])) , d3.max(arrGraph.map(d => d.values[drawMax?1:0]))];
// создаем шкалы преобразования и выводим оси
const [scX, scY] = createAxis(svg, arrGraph, attr_area);
const [scX, scY] = createAxis(svg, arrGraph, attr_area,scaleYDomain);
// рисуем график
const scaleYDomain = [d3.min(arrGraph.map(d => d.values[0])),d3.max(arrGraph.map(d => d.values[1]))];
if (drawMin && drawMax){
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,0,scaleYDomain)
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,0,scaleYDomain)
if (drawMin && drawMax) {
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0, graphtype, 0, scaleYDomain)
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1, graphtype, 0, scaleYDomain)
}
else if (drawMin) {
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,1,scaleYDomain)
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0, graphtype, 1, scaleYDomain)
}
else if (drawMax) {
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,1,scaleYDomain)
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1, graphtype, 1, scaleYDomain)
}
}
function createAxis(svg, data, attr_area) {
function createAxis(svg, data, attr_area,scaleYDomain) {
// находим интервал значений, которые нужно отложить по оси OY
// максимальное и минимальное значение и максимальных высот по каждой стране
const [min, max] = [d3.min(data.map(d => d.values[0])),d3.max(data.map(d => d.values[1]))];
const [min, max] = scaleYDomain;
// функция интерполяции значений на оси
// по оси ОХ текстовые значения
@@ -89,32 +91,45 @@ function createAxis(svg, data, attr_area) {
return [scaleX, scaleY]
}
function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx,isHistogram,horisontalScale,scaleYDomain) {
if (isHistogram){
svg.selectAll(".dot")
.data(data)
.enter()
.append("rect")
.attr("x", d => scaleX(d.labelX)+valueIdx*6)
.attr("y", d => scaleY(d.values[valueIdx]))
.attr("width",6*(horisontalScale+1))
.attr("height",d => scaleY(scaleYDomain[0]*0.85)-scaleY(d.values[valueIdx]))
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.style("fill", color)
function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx, graphType, horisontalScale, scaleYDomain) {
if (graphType == 1) {
svg.selectAll(".dot")
.data(data)
.enter()
.append("rect")
.attr("x", d => scaleX(d.labelX) + valueIdx * 6)
.attr("y", d => scaleY(d.values[valueIdx]))
.attr("width", 6 * (horisontalScale + 1))
.attr("height", d => scaleY(scaleYDomain[0] * 0.85) - scaleY(d.values[valueIdx]))
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.style("fill", color)
}
else{
const r = 4;
else if (graphType == 2) {
const line = d3.line()
.x(d => scaleX(d.labelX) + scaleX.bandwidth() / 2 + valueIdx * 4)
.y(d => scaleY(d.values[valueIdx]));
svg.selectAll(".dot")
.data(data)
.enter()
.append("circle")
.attr("r", r)
.attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2+valueIdx*4)
.attr("cy", d => scaleY(d.values[valueIdx]))
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.style("fill", color)
}
svg.append('path')
.datum(data)
.attr('d', line.curve(d3.curveBasis))
.attr('stroke-width',2)
.attr('fill', 'none')
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.attr('stroke', color);
}
else if (graphType == 0) {
const r = 4;
svg.selectAll(".dot")
.data(data)
.enter()
.append("circle")
.attr("r", r)
.attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2 + valueIdx * 4)
.attr("cy", d => scaleY(d.values[valueIdx]))
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.style("fill", color)
}
}

2
current_site/src/styles/graph.styl
View File

@@ -8,8 +8,6 @@ svg
path,
line
fill: none
stroke: #333333
width: 1px
.error
color: red