hw 3 done

current_site/src/pages/graph.pug

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

current_site/src/pages/graph/chart.js

@@ -34,12 +34,14 @@ 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)
@@ -52,10 +54,10 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
     }
 }
 
-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,8 +91,8 @@ function createAxis(svg, data, attr_area) {
     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")
             .data(data)
             .enter()
@@ -104,7 +106,20 @@ function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx,isHis
 
 
     }
-    else{
+    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.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")

current_site/src/styles/graph.styl

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