Javascript D3属性高度：预期长度；“南”；

这可能是一个简单的错误，因为我是D3的新手，但我正在尝试创建一个简单的条形图，其中包含了条形图的缩放高度。对于硬编码的高度，它可以正常工作，但当我尝试使用线性比例时，返回错误“error:attribute height:Expected length，”NaN“。我已经记录了d.grossbillions的类型，这是一个数字，也是我期望的数字，所以不知道为什么我会得到NaN。非常感谢您的帮助

HTML:

2017年最卖座电影

CSS:

svg{
边框：1px纯黑；
背景色：#e2ffff；
}
svg:n子级（2）{
边框：2件纯红；
填充：#00ff00；
}
正文{
填充：#fff；
字体系列：无衬线；
字号：1.1rem；
}
h1{
字体系列：无衬线；
}
身体{
文本对齐：居中；
}

Javascript:

<script type="text/javascript">
var gross = [
{name: 'The Last Jedi', grossBillions:1.7},
{name:'Fast and Furious 8', grossBillions:1.3},
{name:'Transformers: The Last Knight', grossBillions:1.2},
{name:'Despicable Me 3', grossBillions:1},
{name:'Beauty and The Beast', grossBillions:0.95},
{name:'Spider-Man Homecoming', grossBillions:0.9}
];

var yScale = d3.scaleLinear()
    .domain([0, d3.max(gross)])
    .range([0, 700]);

var chart = d3.select('.chart')
            .append('svg')
            .attr('width', gross.length*100)
            .attr('height', 700);

var bars = chart.selectAll('rect').data(gross);

 bars.enter()
    .append('rect')
        .attr('width', 50)
        .attr('height', function(d){return yScale(d.grossBillions) })
        .attr('class', 'bar')
        .attr('x', function(d,i) { return (i * 100)+20 })
        .attr('y', function(d){return 700 - d.grossBillions*400});

chart.selectAll( 'rect:nth-child(odd)' ).attr( 'fill' , '#494949' );
chart.selectAll( 'rect:nth-child(even)' ).attr( 'fill' , '#6b6b6b' );

var labels = chart.selectAll('text').data(gross);

labels.enter()
    .append('text')
    .text(function(d){return d.name + ' {$' + d.grossBillions + ' billion}'})
    .attr('y', 700)
    .attr('x', function(d,i) { return i * 100 });

chart.select('text:nth-child(7)').attr('transform', 'rotate(-90 10,660)');
chart.select('text:nth-child(8)').attr('transform', 'rotate(-90 110,660)');
chart.select('text:nth-child(9)').attr('transform', 'rotate(-90 210,660)');
chart.select('text:nth-child(10)').attr('transform', 'rotate(-90 310,660)');
chart.select('text:nth-child(11)').attr('transform', 'rotate(-90 410,660)');
chart.select('text:nth-child(12)').attr('transform', 'rotate(-90 510,660)');

总风险=[
{姓名：'最后的绝地武士'，格罗斯比昂：1.7}，
{name:'Fast and frequence 8'，grossBillions:1.3}，
{名称：'变形金刚：最后的骑士'，格罗斯比伦：1.2}，
{姓名：'卑鄙的我3'，格罗斯比伦：1}，
{名称：'Beauty and Beast'，grossBillions:0.95}，
{名称：'Spider-Man Homecoming'，grossBillions:0.9}
];
var yScale=d3.scaleLinear（）
.域（[0，d3.最大值（总）]）
.范围（[0700]）；
var chart=d3。选择（“.chart”）
.append（'svg'）
.attr（'宽度'，总长度*100）
.attr（'height'，700）；
var bars=图表。selectAll（'rect'）。数据（总值）；
输入（）
.append（'rect'）
.attr（'宽度'，50）
.attr（'height'，function（d）{return yScale（d.grossBillions）}）
.attr（'class'，'bar'）
.attr（'x'，函数（d，i）{return（i*100）+20}）
.attr（'y'，函数（d）{return 700-d.grossBillions*400}）；
chart.selectAll（'rect:nth child（odd）'））.attr（'fill'，'#4949'）；
图表.selectAll（'rect:nth child（偶数）'）.attr（'fill'，'#6b'）；
var标签=图表。选择全部（'text'）。数据（总值）；
标签。输入（）
.append（'文本'）
.text（函数（d）{返回d.name+'{$'+d.grossBillions+'billion}}）
.attr（'y'，700）
.attr（'x'，函数（d，i）{return i*100}）；
图表。选择（'text:n第n个子（7）'）。属性（'transform'，'rotate（-90 10660）'）；
图表。选择（'text:n第n个子（8）'）。属性（'transform'，'rotate（-90 110660））；
图表。选择（'text:n第n个子（9）'）。属性（'transform'，'rotate（-90 210660））；
图表。选择（'text:n第n个子（10）'）。属性（'transform'，'rotate（-90 310660））；
图表。选择（'text:n第n个子（11）'）。属性（'transform'，'rotate（-90 410660））；
图表。选择（'text:n第n个子（12）'）。属性（'transform'，'rotate（-90 510660））；

---

您的

yScale

域的计算不正确，应该是这样的：

var yScale = d3.scaleLinear()
  .domain([0, d3.max(gross, function(d){return d.grossBillions;}])
  .range([0, 700]);

这样，将正确计算返回值

<script type="text/javascript">
var gross = [
{name: 'The Last Jedi', grossBillions:1.7},
{name:'Fast and Furious 8', grossBillions:1.3},
{name:'Transformers: The Last Knight', grossBillions:1.2},
{name:'Despicable Me 3', grossBillions:1},
{name:'Beauty and The Beast', grossBillions:0.95},
{name:'Spider-Man Homecoming', grossBillions:0.9}
];

var yScale = d3.scaleLinear()
    .domain([0, d3.max(gross)])
    .range([0, 700]);

var chart = d3.select('.chart')
            .append('svg')
            .attr('width', gross.length*100)
            .attr('height', 700);

var bars = chart.selectAll('rect').data(gross);

 bars.enter()
    .append('rect')
        .attr('width', 50)
        .attr('height', function(d){return yScale(d.grossBillions) })
        .attr('class', 'bar')
        .attr('x', function(d,i) { return (i * 100)+20 })
        .attr('y', function(d){return 700 - d.grossBillions*400});

chart.selectAll( 'rect:nth-child(odd)' ).attr( 'fill' , '#494949' );
chart.selectAll( 'rect:nth-child(even)' ).attr( 'fill' , '#6b6b6b' );

var labels = chart.selectAll('text').data(gross);

labels.enter()
    .append('text')
    .text(function(d){return d.name + ' {$' + d.grossBillions + ' billion}'})
    .attr('y', 700)
    .attr('x', function(d,i) { return i * 100 });

chart.select('text:nth-child(7)').attr('transform', 'rotate(-90 10,660)');
chart.select('text:nth-child(8)').attr('transform', 'rotate(-90 110,660)');
chart.select('text:nth-child(9)').attr('transform', 'rotate(-90 210,660)');
chart.select('text:nth-child(10)').attr('transform', 'rotate(-90 310,660)');
chart.select('text:nth-child(11)').attr('transform', 'rotate(-90 410,660)');
chart.select('text:nth-child(12)').attr('transform', 'rotate(-90 510,660)');

var yScale = d3.scaleLinear()
  .domain([0, d3.max(gross, function(d){return d.grossBillions;}])
  .range([0, 700]);