javascript - 堆叠条形图比例不一致问题

Question

我有以下使用最新 D3 版本的 D3 代码(工作示例 here)，我正在尝试构建一个简单的堆积条形图。

const svg = d3.select("svg")
const padding = 30
const margins = {
  left: 60,
  right: 0,
  bottom: 50,
  top: 15
}
const svgDimensions = {
  height: 434,
  width: 734
}
const chartPerimeterDimensions = {
  width: svgDimensions.width - margins.left - margins.right,
  height: svgDimensions.height - margins.top - margins.bottom
}

const barChartData = [
  { age: 55, patient: 0.1, population: 0 },
  { age: 56, patient: 0.2, population: 0.1 },
  { age: 57, patient: 0.3, population: 0.1 },
  { age: 58, patient: 0.5, population: 0.2 },
  { age: 59, patient: 0.6, population: 0.3 },
  { age: 60, patient: 0.8, population: 0.4 },
  { age: 61, patient: 1, population: 0.5 },
  { age: 62, patient: 1.2, population: 0.6 },
  { age: 63, patient: 1.5, population: 0.7 },
  { age: 64, patient: 1.8, population: 0.8 },
  { age: 65, patient: 2.2, population: 1 },
  { age: 66, patient: 2.6, population: 1.2 },
  { age: 67, patient: 3.1, population: 1.4 },
  { age: 68, patient: 3.7, population: 1.7 },
  { age: 69, patient: 4.3, population: 2 },
  { age: 70, patient: 5, population: 2.4 },
  { age: 71, patient: 5.8, population: 2.8 },
  { age: 72, patient: 6.8, population: 3.2 },
  { age: 73, patient: 7.9, population: 3.7 },
  { age: 74, patient: 9.1, population: 4.4 },
  { age: 75, patient: 10.5, population: 5 },
  { age: 76, patient: 12.1, population: 5.9 },
  { age: 77, patient: 13.9, population: 6.8 },
  { age: 78, patient: 15.9, population: 7.9 },
  { age: 79, patient: 18.2, population: 9.2 },
  { age: 80, patient: 20.7, population: 10.6 },
  { age: 81, patient: 23.5, population: 12.2 },
  { age: 82, patient: 30.1, population: 14.2 },
  { age: 83, patient: 33.4, population: 16.4 },
  { age: 84, patient: 36.7, population: 18.9 },
  { age: 85, patient: 38, population: 21.8 } ]

const yMax = Math.max(barChartData[30].patient, barChartData[30].population)
const yMin = 0
const yScale = d3
    .scaleLinear()
    .domain([yMin, yMax + 10])
    .range([chartPerimeterDimensions.height, 0])

  // Establish x scale
const xSeries = barChartData.map(d => d.age);
const xScale = d3
    .scaleBand()
    .range([0, chartPerimeterDimensions.width])
    .padding(0.1);

xScale
    .domain(xSeries)
    .paddingOuter(padding / xScale.step());

const keys = ["population", "patient"]
const colors = ["grey", "red"]
const colorScale = d3
    .scaleOrdinal()
    .domain(keys)
    .range(colors)

const xAxis = d3.axisBottom(xScale).tickValues([55, 60, 65, 70, 75, 80, 85])
const yAxis = d3.axisLeft(yScale)

  // Create the group to place our chart within
const chartGroup = svg
    .append('g')
    .attr('transform', `translate(${margins.left}, ${margins.top})`)

  // Create D3 stack data
const values = d3
    .stack()
    .keys(keys)(barChartData)

  // Add stacked bar chart to svg
chartGroup
    .selectAll("g.bars")
    .data(values)
    .join("g")
      .attr("fill", d => colorScale(d.key))
      .attr('class', 'bars')
    .selectAll("rect")
    .data(d => {
      return d
    })
    .join("rect")
      .attr("x", d => xScale(d.data.age))
      .attr("y", d => {
        const result = yScale(d[1])
        return result
      })
      .attr("height", d => {
        const result = yScale(d[0]) - yScale(d[1])
        return result
      })
      .attr("width", xScale.bandwidth())
      .attr('class', 'bar')

  /**
   * Create Y-Axis
   */
svg
    .append('g')
    .attr('transform', `translate(${margins.left}, ${margins.top})`)
    .call(yAxis)

  /**
   * Create X-Axis
   */
svg
    .append('g')
    .attr('transform', `translate(${margins.left}, ${svgDimensions.height - margins.bottom})`)
    .call(xAxis)

我意识到人口栏是完美的，但是患者栏很长并且溢出到图表顶部，尽管该数据集中的最大值为 38。我想知道这是否是一个问题:

• 错误配置的 y 尺度函数
• 配置错误的堆栈数据

有什么想法吗？

编辑:我意识到我可能为此数据集使用了错误类型的图表。分组条形图可能是更好的选择，因为我试图显示类别(即年龄)之间的离散数字比较。

Answer 1

您有一个堆积条形图。因此，获取两个变量中的最大值...

const yMax = Math.max(barChartData[30].patient, barChartData[30].population)

... 不是设置上域的正确方法。最重要的是，您不应该相信最后一个对象具有最大值。

话虽如此，您可以使用堆叠数据本身获得最大值:

const yMax = d3.max(values[values.length - 1], function(d){
    return d[1];
});

这是结果代码:

const svg = d3.select("svg")
const padding = 30
const margins = {
  left: 60,
  right: 0,
  bottom: 50,
  top: 15
}
const svgDimensions = {
  height: 434,
  width: 734
}
const chartPerimeterDimensions = {
  width: svgDimensions.width - margins.left - margins.right,
  height: svgDimensions.height - margins.top - margins.bottom
}

const barChartData = [{
    age: 55,
    patient: 0.1,
    population: 0
  },
  {
    age: 56,
    patient: 0.2,
    population: 0.1
  },
  {
    age: 57,
    patient: 0.3,
    population: 0.1
  },
  {
    age: 58,
    patient: 0.5,
    population: 0.2
  },
  {
    age: 59,
    patient: 0.6,
    population: 0.3
  },
  {
    age: 60,
    patient: 0.8,
    population: 0.4
  },
  {
    age: 61,
    patient: 1,
    population: 0.5
  },
  {
    age: 62,
    patient: 1.2,
    population: 0.6
  },
  {
    age: 63,
    patient: 1.5,
    population: 0.7
  },
  {
    age: 64,
    patient: 1.8,
    population: 0.8
  },
  {
    age: 65,
    patient: 2.2,
    population: 1
  },
  {
    age: 66,
    patient: 2.6,
    population: 1.2
  },
  {
    age: 67,
    patient: 3.1,
    population: 1.4
  },
  {
    age: 68,
    patient: 3.7,
    population: 1.7
  },
  {
    age: 69,
    patient: 4.3,
    population: 2
  },
  {
    age: 70,
    patient: 5,
    population: 2.4
  },
  {
    age: 71,
    patient: 5.8,
    population: 2.8
  },
  {
    age: 72,
    patient: 6.8,
    population: 3.2
  },
  {
    age: 73,
    patient: 7.9,
    population: 3.7
  },
  {
    age: 74,
    patient: 9.1,
    population: 4.4
  },
  {
    age: 75,
    patient: 10.5,
    population: 5
  },
  {
    age: 76,
    patient: 12.1,
    population: 5.9
  },
  {
    age: 77,
    patient: 13.9,
    population: 6.8
  },
  {
    age: 78,
    patient: 15.9,
    population: 7.9
  },
  {
    age: 79,
    patient: 18.2,
    population: 9.2
  },
  {
    age: 80,
    patient: 20.7,
    population: 10.6
  },
  {
    age: 81,
    patient: 23.5,
    population: 12.2
  },
  {
    age: 82,
    patient: 30.1,
    population: 14.2
  },
  {
    age: 83,
    patient: 33.4,
    population: 16.4
  },
  {
    age: 84,
    patient: 36.7,
    population: 18.9
  },
  {
    age: 85,
    patient: 38,
    population: 21.8
  }
]

const yMin = 0


// Establish x scale
const xSeries = barChartData.map(d => d.age);
const xScale = d3
  .scaleBand()
  .range([0, chartPerimeterDimensions.width])
  .padding(0.1);

xScale
  .domain(xSeries)
  .paddingOuter(padding / xScale.step());

const keys = ["population", "patient"]
const colors = ["grey", "red"]
const colorScale = d3
  .scaleOrdinal()
  .domain(keys)
  .range(colors)

const xAxis = d3.axisBottom(xScale).tickValues([55, 60, 65, 70, 75, 80, 85])


// Create the group to place our chart within
const chartGroup = svg
  .append('g')
  .attr('transform', `translate(${margins.left}, ${margins.top})`)

// Create D3 stack data
const values = d3
  .stack()
  .keys(keys)(barChartData);

const yMax = d3.max(values[values.length - 1], function(d) {
  return d[1];
});

const yScale = d3
  .scaleLinear()
  .domain([yMin, yMax + 10])
  .range([chartPerimeterDimensions.height, 0])

const yAxis = d3.axisLeft(yScale)

// Add stacked bar chart to svg
chartGroup
  .selectAll("g.bars")
  .data(values)
  .join("g")
  .attr("fill", d => colorScale(d.key))
  .attr('class', 'bars')
  .selectAll("rect")
  .data(d => {
    return d
  })
  .join("rect")
  .attr("x", d => xScale(d.data.age))
  .attr("y", d => {
    const result = yScale(d[1])
    return result
  })
  .attr("height", d => {
    const result = yScale(d[0]) - yScale(d[1])
    return result
  })
  .attr("width", xScale.bandwidth())
  .attr('class', 'bar')

/**
 * Create Y-Axis
 */
svg
  .append('g')
  .attr('transform', `translate(${margins.left}, ${margins.top})`)
  .call(yAxis)

/**
 * Create X-Axis
 */
svg
  .append('g')
  .attr('transform', `translate(${margins.left}, ${svgDimensions.height - margins.bottom})`)
  .call(xAxis)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
<svg height="434" width="734"></svg>