Javascript 如何在d3条形图中显示负值？

嘿：）尽管有很多人尝试使用互联网上的代码片段，但我无法在已合并到React组件中的d3条形图中显示负值。由于渲染而导致负值时，将不显示任何内容

组成部分：

// npm.
import React from 'react'
import {
  select,
  scaleBand,
  scaleLinear
} from 'd3'

// tmp.
import data from './data'

// styles.
import styles from './styles.scss'

class YearProfitLossBarChart extends React.Component {
  constructor(props) {
    super(props)

    this.draw = this.draw.bind(this)
  }

  componentDidMount() {
    this.draw()
  }

  componentDidUpdate() {
    this.draw()
  }

  render() {
    return (
      <svg style={{ width: '100%', height: '100%', marginBottom: '-4px' }} ref={(node) => {this.node = node}}></svg>
    )
  }

  draw() {
    let bounds = this.node.getBoundingClientRect()
    let width = bounds.width
    let height = bounds.height

    let node = select(this.node)

    let xScale = scaleBand()
    xScale.domain(data.map((d) => d.month))
    xScale.padding(1/8);
    xScale.paddingOuter(0)
    xScale.range([0, width])

    let yScale = scaleLinear()
    yScale.domain([0, Math.max(...data.map((d) => d.value))])
    yScale.range([0, height])

    let bars = node.selectAll('rect').data(data)
    bars.enter()
      .append('rect')
      .merge(bars)
      .attr('x', (d) => xScale(d.month))
      .attr('y', (d) => height - yScale(d.value))
      .attr('width', xScale.bandwidth())
      .attr('height', (d) => yScale(d.value))
 }
}

export default YearProfitLossBarChart

我不太熟悉d3，因为这是我第一个使用它的项目，所以请原谅，如果这是显而易见的。 非常感谢您的帮助

组件呈现如下所示：

---

非常感谢您的时间：）

如果没有负数，请将域最小值设置为0，否则请将其设置为最小数据值

yScale.domain([ Math.min(0, d3.min(data, d => d.value)), d3.max(data, d => d.value) ])

您需要更改钢筋高度的计算

yScale.range([height, 0]);
let bars = node.selectAll('rect').data(data)
    bars.enter()
      .append('rect')
      .merge(bars)
      .attr('x', (d) => xScale(d.month))
      .attr('y', (d) => yScale(d.value))
      .attr('width', xScale.bandwidth())
      .attr('height', (d) => height - yScale(d.value))

---

我认为问题可能在于您正在将Y域设置为：

yScale.domain（[0，Math.max（…data.map（（d）=>d.value）））

，因此0是将显示的最低值。也许做一个类似的

Math.min（…）

而不是传递

0

。嘿，不幸的是，我们尝试了，结果是一样的。。。谢谢：）啊，好的。我确实找到了一些例子，如果有帮助的话，希望其他人能提供更多帮助。

yScale.range([height, 0]);
let bars = node.selectAll('rect').data(data)
    bars.enter()
      .append('rect')
      .merge(bars)
      .attr('x', (d) => xScale(d.month))
      .attr('y', (d) => yScale(d.value))
      .attr('width', xScale.bandwidth())
      .attr('height', (d) => height - yScale(d.value))