D3.js D3Y(数字)返回NaN

D3.js D3Y(数字)返回NaN,d3.js,D3.js,我一直把头撞在墙上想弄明白这件事。我通常可靠的谷歌Fu让我失望了。我没有发现任何东西,所以这给我指明了正确的方向。我希望能在这方面得到一些帮助 我正在构建一个分组条形图。由于某种原因,y(数字)只会给我NaN,即使我传递一个数字 代码如下: const data = [ { 'provider': 'twitter', 'likes': 2362, 'comments': 107, 'shares': 1129 }, { 'provider':

我一直把头撞在墙上想弄明白这件事。我通常可靠的谷歌Fu让我失望了。我没有发现任何东西,所以这给我指明了正确的方向。我希望能在这方面得到一些帮助

我正在构建一个分组条形图。由于某种原因,y(数字)只会给我NaN,即使我传递一个数字

代码如下:

const data = [
  {
    'provider': 'twitter',
    'likes': 2362,
    'comments': 107,
    'shares': 1129
  },
  {
    'provider': 'facebook',
    'likes': 2783,
    'comments': 148,
    'shares': 1069
  },
  {
    'provider': 'instagram',
    'likes': 1878,
    'comments': 101,
    'shares': 1032
  },
  {
    'provider': 'tumblr',
    'likes': 2965,
    'comments': 147,
    'shares': 1393
  }
]

const margin = {top: 10, right: 10, bottom: 10, left: 10},
  width = 628 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom

const x0 = d3.scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.1)

const x1 = d3.scaleBand()
  .padding(0.1)

const y = d3.scaleLinear()
  .rangeRound([height, 0])

const keys = d3.keys(data[0]).filter((key) => (key !== 'provider'))

console.log('keys ', keys) // keys  ["likes","comments","shares"]

data.forEach((d) => {
  d.values = keys.map((name) => ({name: name, value: +d[name]}))
})

x0.domain(data.map(d => d.provider))
x1.domain(keys).range([0, x0.bandwidth()])
y.domain(0, d3.max(data, (d) => (d3.max(d.values, (d) => (d.value)))))

console.log('max', d3.max(data, (d) => (d3.max(d.values, (d) => (d.value))))) // max 2965

const svg = d3.select('body').append('svg')
  .attr('width', 628)
  .attr('height', 300)

const provider = svg.selectAll('.provider')
  .data(data)
    .enter().append('g')
    .attr('class', d => 'provider-' + d.provider)
    .attr('transform', d => `translate(${x0(d.provider)}, 0)`)

provider.selectAll('rect')
  .data(d => d.values)
  .enter().append('rect')
  .attr('width', x1.bandwidth())
  .attr('x', d => x1(d.name))
  .attr('y', d => {
    console.log('d.value ', d.value) // d.value  2362
    console.log('y(d.value) ', y(d.value)) // NaN
  })

domain
方法需要一个数组:

y.domain([0, 
          d3.max(data, (d) => (d3.max(d.values, (d) => (d.value))))
          ])

.rangeRound([height,0])
你是说这里的
[0,height]
吗?可能吧。即使我交换了它,我还是会得到NaN。