D3 y (number)는 NaN을 반환합니다.

Question

저는 이것을 벽에 대고 머리를 치려고했습니다. 내 정상적으로 신뢰할 수있는 Google-Fu가 실패했습니다. 내가 찾은 바에 의하면 아무 것도 올바른 방향으로 나를 지적하지 못했습니다. 이것에 대한 도움을 많이 원할 것입니다.

그룹화 된 막 대형 차트를 만들었습니다. 어떤 이유로 y (number)는 숫자를 전달하더라도 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 
    }) 

Answer 1

domain 방법은 기대 배열 :

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