diff --git a/labs/lab3/CSS/style.css b/labs/lab3/CSS/style.css index 72e45cf..6b6fe2d 100644 --- a/labs/lab3/CSS/style.css +++ b/labs/lab3/CSS/style.css @@ -11,7 +11,7 @@ svg path, line { width: 1px; } -#errorDisplay{ +.error{ color:red; background-color: black; font-weight: bolder; diff --git a/labs/lab3/JavaScript/chart.js b/labs/lab3/JavaScript/chart.js index 17ce04d..2c3ed57 100644 --- a/labs/lab3/JavaScript/chart.js +++ b/labs/lab3/JavaScript/chart.js @@ -20,7 +20,9 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) { // создаем массив для построения графика let arrGraph = createArrGraph(data, keyX); - + if(keyX=="Год"){ + arrGraph = d3.sort(arrGraph, (x,y)=>Number(x["labelX"])-Number(y["labelX"])); + } const svg = d3.select("svg") svg.selectAll('*').remove(); @@ -36,12 +38,17 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) { const [scX, scY] = createAxis(svg, arrGraph, attr_area); // рисуем график - if (drawMin) { - createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0) - } - if (drawMax) { - createChart(svg, arrGraph, scX, scY, attr_area, "red", 1) + const scaleYDomain = d3.extent(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) + } + else if (drawMin) { + 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) } } @@ -82,7 +89,22 @@ function createAxis(svg, data, attr_area) { return [scaleX, scaleY] } -function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx) { +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) + + + } + else{ const r = 4; svg.selectAll(".dot") @@ -90,8 +112,9 @@ function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx) { .enter() .append("circle") .attr("r", r) - .attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2) + .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) -} \ No newline at end of file +} +} diff --git a/labs/lab3/JavaScript/main.js b/labs/lab3/JavaScript/main.js index aa0bc69..191bfa4 100644 --- a/labs/lab3/JavaScript/main.js +++ b/labs/lab3/JavaScript/main.js @@ -16,15 +16,18 @@ document.addEventListener("DOMContentLoaded", function () { clearGraph(); updateGraph(); }); + document.querySelectorAll("[name=\"OY\"]").forEach((x) => { + x.addEventListener("click", () => { d3.select("#drawButton").attr("class", getOY().length == 0 ? "error" : ""); }) + }) }); function updateGraph() { - const keyX = ["Год","Страна"][getOX()]; + const keyX = ["Год", "Страна"][getOX()]; const yAxis = getOY(); - errorDisplay.hidden = yAxis.length!=0 - drawGraph(buildings,keyX, yAxis.includes(0),yAxis.includes(1)); + d3.select("#drawButton").attr("class", yAxis.length == 0 ? "error" : ""); + drawGraph(buildings, keyX, yAxis.includes(0), yAxis.includes(1), getGraphType()); } @@ -38,6 +41,10 @@ function getOY() { (x) => Number(x.value)); } -function clearGraph(){ +function clearGraph() { d3.select("svg").selectAll('*').remove(); +} + +function getGraphType() { + return Number(graphType.value); } \ No newline at end of file diff --git a/labs/lab3/index.html b/labs/lab3/index.html index c720e73..e9568f3 100644 --- a/labs/lab3/index.html +++ b/labs/lab3/index.html @@ -26,6 +26,11 @@
Max +
+