javascript - 如何使用 d3.js 为嵌入条形图中的折线图设置不同的范围

Question

我有一个简单的条形图，按年份显示数据。最重要的是，我正在制作一个代表同一时间另一个数据点的折线图。但是，我没有去年折线图的数据。

[这是迄今为止的图表图像。][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

Answer 1

正如上面评论中提到的，问题在于最终数据点没有 Teen_Unemployment 数据点的数据集。结果，最后一个点被计为 0 或 null，并且该点下降到 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;
        }))]);

最后，我们使用 lineData 创建 lineChart，如下所示:

  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>