Как установить другой диапазон для линейной диаграммы, встроенной в линейчатую диаграмму, с помощью d3. js - PullRequest
Новая
       73

Как установить другой диапазон для линейной диаграммы, встроенной в линейчатую диаграмму, с помощью d3. js

0 голосов
/ 07 мая 2020

У меня есть простая гистограмма, показывающая данные по годам. Сверху я делаю линейную диаграмму, представляющую другую точку данных за то же время. Однако у меня нет данных для графика за последний год.

[Вот изображение графика на данный момент.] [1]

Как вы увидите, этот график выглядит так, будто количество безработных за последний год внезапно упало.

Для этой линейной диаграммы, где я могу изменить диапазон данных, по которому должна быть нарисована линия.

Вот мой d3. js для линейной диаграммы: 



var margin = {top: 20, right: 35, bottom: 30, left: 40},
      width = 600,
      height = 400;

  var xScale = d3.scaleBand()
                .rangeRound([0, width])
                .padding(0.1)
                .domain(dataset.map(function(d) {
                  return d.Year;
                }));


      yScale = d3.scaleLinear()
                .rangeRound([height, 0])
                .domain([0, d3.max(dataset, (function (d) {
                  return d.SYEP_Enrollment;
                }))]);

                yLineScale = d3.scaleLinear()
                .rangeRound([height, 0])
                .domain([0, d3.max(dataset, (function (d) {
                  return d.Teen_Unemployment;
                }))]);

  var svg = d3.select(".bar-chart-wrapper svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

  var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // axis-x
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale));

  // axis-y
  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(yScale));

      // axis-y for the line
  g.append("g")
      .attr("class", "axis axis--y")
      .attr('transform',`translate(${width},0)`)
      .call(d3.axisRight(yLineScale));

  var bar = g.selectAll("rect")
    .data(dataset)
    .enter().append("g");

  // bar chart
  bar.append("rect")
    .attr("x", function(d) { return xScale(d.Year); })
    .attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
    .attr('class','bar')


  // labels on the bar chart
  bar.append("text")
    .attr("dy", "1.8em")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.SYEP_Enrollment;
    });

  // line chart

  // axis-y
  g.append("g")
      .call(d3.axisRight(yLineScale));

  var line = d3.line()
      .x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
      .y(function(d) { return yLineScale(d.Teen_Unemployment)})
      .curve(d3.curveMonotoneX);

  bar.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(dataset)); // 11. Calls the line generator

  bar.append("circle")
      .attr("class", "dot") 
      .attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
      .attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
      .attr("r", 5);


       // labels on the line chart
  bar.append("text")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return parseInt(d.Teen_Unemployment * 100) + '%';
    });


[Here is a link to the JSON file.][2]


  [1]: https://drive.google.com/open?id=1-6SW_wRVaBA70rItvuhecXSxCTgUwH2x
  [2]: https://docs.google.com/document/d/1g2h934hhEA0VsXZZLcDL9oHnRLnwBCJYBCD_NdZGGXw/edit?usp=sharing

1 Ответ

1 голос
/ 07 мая 2020

Как упоминалось в комментариях выше, проблема заключается в наборе данных, где конечная точка данных не имеет точки данных Teen_Unemployment. В результате последняя точка считается как 0 или ноль, и точка опускается к нижней части шкалы Y.

Чтобы исправить это, мы создаем отдельный набор данных для линейной диаграммы, удаляя любые точки данных, которые иметь пустое поле Teen_Unemployment, например:

var lineData = dataset.filter(f => f.Teen_Unemployment != "");

Затем мы используем lineData для сопоставления домена для yLineScale, например: 

   var   yLineScale = d3.scaleLinear()
        .rangeRound([height, 0])
        .domain([0, d3.max(lineData, (function (d) {
          return d.Teen_Unemployment;
        }))]);

Наконец, мы создаем lineChart с lineData вот так: 

  g.append("g")
      .call(d3.axisRight(yLineScale));

  var line = d3.line()
      .x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
      .y(function(d) { return yLineScale(d.Teen_Unemployment)})
      .curve(d3.curveMonotoneX);

    let lineChart = g.append('g')
                                    .attr('class', 'lineChart')
                    ;


  lineChart.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(lineData)); // 11. Calls the line generator

  lineChart.selectAll('circle').data(lineData).enter().append("circle")
      .attr("class", "dot") 
      .attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
      .attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
      .attr("r", 5);


       // labels on the line chart
  lineChart.selectAll('text').data(lineData).enter().append("text")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return parseInt(d.Teen_Unemployment * 100) + '%';
    });

Рабочий пример: 

    var dataset = [
  {
    "Year": 2007,
    "SYEP_Enrollment": 41650,
    "Teen_Unemployment": .330
  },
  {
    "Year": 2008,
    "SYEP_Enrollment": 41804,
    "Teen_Unemployment": .302
  },
  {
    "Year": 2009,
    "SYEP_Enrollment": 43113,
    "Teen_Unemployment": .308
  },
  {
    "Year": 2010,
    "SYEP_Enrollment": 52255,
    "Teen_Unemployment": .325
  },
  {
    "Year": 2011,
    "SYEP_Enrollment": 35725,
    "Teen_Unemployment": .383
  },
  {
    "Year": 2012,
    "SYEP_Enrollment": 30628,
    "Teen_Unemployment": .399
  },
  {
    "Year": 2013,
    "SYEP_Enrollment": 29416,
    "Teen_Unemployment": .408
  },
  {
    "Year": 2014,
    "SYEP_Enrollment": 35957,
    "Teen_Unemployment": .369
  },
  {
    "Year": 2015,
    "SYEP_Enrollment": 47126,
    "Teen_Unemployment": .357
  },
  {
    "Year": 2016,
    "SYEP_Enrollment": 54263,
    "Teen_Unemployment": .334
  },
  {
    "Year": 2017,
    "SYEP_Enrollment": 60113,
    "Teen_Unemployment": .316
  },
  {
    "Year": 2018,
    "SYEP_Enrollment": 69716,
    "Teen_Unemployment": .291
  },
  {
    "Year": 2019,
    "SYEP_Enrollment": 74354,
    "Teen_Unemployment":""
  }
];
   
  //make a copy of the dataset for the lineChart
var lineData = dataset.filter(f => f.Teen_Unemployment != "");
    
var margin = {top: 20, right: 35, bottom: 30, left: 40},
      width = 600,
      height = 400;

  var xScale = d3.scaleBand()
                .rangeRound([0, width])
                .padding(0.1)
                .domain(dataset.map(function(d) {
                  return d.Year;
                }));


   var   yScale = d3.scaleLinear()
                .rangeRound([height, 0])
                .domain([0, d3.max(dataset, (function (d) {
                  return d.SYEP_Enrollment;
                }))]);

   var   yLineScale = d3.scaleLinear()
        .rangeRound([height, 0])
        .domain([0, d3.max(lineData, (function (d) {
          return d.Teen_Unemployment;
        }))]);

  var svg = d3.select(".bar-chart-wrapper svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

  var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top +")");

  // axis-x
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale));

  // axis-y
  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(yScale));

  // axis-y for the line
  g.append("g")
      .attr("class", "axis axis--y")
      .attr('transform',`translate(${width},0)`)
      .call(d3.axisRight(yLineScale));

  var bar = g.selectAll("rect")
    .data(dataset)
    .enter().append("g");

  // bar chart
  bar.append("rect")
    .attr("x", function(d) { return xScale(d.Year); })
    .attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
    .attr('class','bar')


  // labels on the bar chart
  bar.append("text")
    .attr("dy", "1.8em")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.SYEP_Enrollment;
    });

  // line chart
	// data filtered above
  
  // axis-y
  g.append("g")
      .call(d3.axisRight(yLineScale));

  var line = d3.line()
      .x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
      .y(function(d) { return yLineScale(d.Teen_Unemployment)})
      .curve(d3.curveMonotoneX);

	let lineChart = g.append('g')
  									.attr('class', 'lineChart')
                    ;
                    
  
  lineChart.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(lineData)); // 11. Calls the line generator

  lineChart.selectAll('circle').data(lineData).enter().append("circle")
      .attr("class", "dot") 
      .attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
      .attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
      .attr("r", 5);


       // labels on the line chart
  lineChart.selectAll('text').data(lineData).enter().append("text")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return parseInt(d.Teen_Unemployment * 100) + '%';
    });
.line {
  fill-opacity: 0;
  stroke: blue
}

.dot {
  fill: white;
  stroke: blue;
}
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div class="bar-chart-wrapper">
    <svg></svg>
  </div>

</body>
...