javascript - 在 d3 条形图中仅显示最大值

Question

我有以下条形图。

https://jsfiddle.net/zyjp1abo/

如您所见，值介于 1000 和 1005 之间。显示从 0 到 1005 的所有数据没有任何意义，因为差异不可见。

我想显示从 1000 到 1005 的条形图并相应地更改 y 轴。简单地使用 extent 并更改域是行不通的，因为条形图是通过底部边距绘制的。我希望它们停在最低值，即 1000。

https://jsfiddle.net/zyjp1abo/1/

有什么想法吗？谢谢!

Answer 1

如果您希望域从 1000 变为 1005，您应该使用 d3.extent。这不是问题。

问题是您正在使用 d3.extent 但您继续使用 y(0) 来平移 x 轴和计算条形高度，这是错误的。您必须使用您的高度和您的边距。

这是您的代码，其中包含这些更改:

var defaults = {
  target: '#chart',
  width: 500,
  height: 170,
  margin: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  yTicks: 5
}

class Barchart {
  constructor(config) {
    Object.assign(this, defaults, config)

    const {
      target,
      width,
      height,
      margin
    } = this
    const w = width - margin.left - margin.right
    const h = height - margin.top - margin.bottom

    const {
      yTicks
    } = this

    this.chart = d3.select(target)
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)

    this.x = d3.scaleBand()
      .rangeRound([0, w])
      .padding(0.1)

    this.y = d3.scaleLinear()
      .rangeRound([h, 0])

    this.xAxis = d3.axisBottom(this.x)

    this.chart.append('g')
      .attr('class', 'x axis')

    this.yAxis = d3.axisLeft(this.y)
      .ticks(yTicks)

    this.chart.append('g')
      .attr('class', 'y axis')
  }

  render(data) {
    const {
      x,
      y,
      xAxis,
      yAxis,
      chart
    } = this

    // y.domain(d3.extent(data, v => v.value))
    y.domain(d3.extent(data, v => v.value))

    const domain = data.map(d => d.timestamp)
    x.domain(domain)

    chart.select('.x.axis')
      .attr('transform', `translate(0, ${(defaults.height - defaults.margin.bottom - defaults.margin.top)})`)
      .call(xAxis)

    chart.select('.y.axis')
      .call(yAxis)

    const bars = chart.selectAll('.bar')
      .data(data)

    bars
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .merge(bars)
      .attr('x', d => x(d.timestamp))
      .attr('y', d => y(d.value))
      .attr('width', x.bandwidth())
      .attr('height', d => defaults.height - defaults.margin.bottom - defaults.margin.top - y(d.value))
  }

}

const random = (min = -10, max = 10) => (
  window.Math.floor(window.Math.random() * (max - min + 1)) + min
)

let bar = []
for (let i = 0; i < 20; i++) {
  bar.push({
    timestamp: Date.now() - (19 - i) * 500,
    value: random(1000, 1005)
  })
}

const barchart = new Barchart()
barchart.render(bar)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="chart">
</svg>

PS:您可以简化 SVG 大小和边距的数学运算。

PPS:关于数据可视化是否可以具有非零基线存在很多争论。我相信某些类型的图表，在某些情况下，可以而且应该有一个非零基线，特别是折线图，例如，当变化率比绝对值更重要时。但是，条形图应始终具有零基线。