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 select#graphType
option(value="0" selected) Точечная option(value="0" selected) Точечная
option(value="1") Гистограма option(value="1") Гистограма
option(value="2") График
button#drawButton Рисовать button#drawButton Рисовать
br 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); let arrGraph = createArrGraph(data, keyX);
if(keyX=="release"){ if (keyX == "release") {
arrGraph = d3.sort(arrGraph, (x,y)=>Number(x["labelX"])-Number(y["labelX"])); arrGraph = d3.sort(arrGraph, (x, y) => Number(x["labelX"]) - Number(y["labelX"]));
} }
const svg = d3.select("svg") const svg = d3.select("svg")
svg.selectAll('*').remove(); svg.selectAll('*').remove();
@@ -34,28 +34,30 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
marginY: 50 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) {
if (drawMin && drawMax){ createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0, graphtype, 0, scaleYDomain)
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,0,scaleYDomain) createChart(svg, arrGraph, scX, scY, attr_area, "red", 1, graphtype, 0, scaleYDomain)
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,0,scaleYDomain)
} }
else if (drawMin) { 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) { 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 // находим интервал значений, которые нужно отложить по оси 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] return [scaleX, scaleY]
} }
function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx,isHistogram,horisontalScale,scaleYDomain) { function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx, graphType, horisontalScale, scaleYDomain) {
if (isHistogram){ if (graphType == 1) {
svg.selectAll(".dot") svg.selectAll(".dot")
.data(data) .data(data)
.enter() .enter()
.append("rect") .append("rect")
.attr("x", d => scaleX(d.labelX)+valueIdx*6) .attr("x", d => scaleX(d.labelX) + valueIdx * 6)
.attr("y", d => scaleY(d.values[valueIdx])) .attr("y", d => scaleY(d.values[valueIdx]))
.attr("width",6*(horisontalScale+1)) .attr("width", 6 * (horisontalScale + 1))
.attr("height",d => scaleY(scaleYDomain[0]*0.85)-scaleY(d.values[valueIdx])) .attr("height", d => scaleY(scaleYDomain[0] * 0.85) - scaleY(d.values[valueIdx]))
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`) .attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.style("fill", color) .style("fill", color)
} }
else{ else if (graphType == 2) {
const r = 4; const line = d3.line()
.x(d => scaleX(d.labelX) + scaleX.bandwidth() / 2 + valueIdx * 4)
.y(d => scaleY(d.values[valueIdx]));
svg.selectAll(".dot") svg.append('path')
.data(data) .datum(data)
.enter() .attr('d', line.curve(d3.curveBasis))
.append("circle") .attr('stroke-width',2)
.attr("r", r) .attr('fill', 'none')
.attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2+valueIdx*4) .attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
.attr("cy", d => scaleY(d.values[valueIdx])) .attr('stroke', color);
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`) }
.style("fill", 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, path,
line line
fill: none fill: none
stroke: #333333
width: 1px
.error .error
color: red color: red