为什么d3.bandwidth（）方法返回NaN？

Question

我对d3.js非常陌生，我正在尝试构建条形图。使用yScale.bandwidth（）设置矩形的高度时，我得到一个错误：属性高度：预期长度“ NaN”。

 let dataArr = [
    {propname: 'distance', value: 200},
    {propname: 'weigth', value: 2000},
    {propname: 'price', value: 1000},
    {propname: 'maxSpeed', value: 180}
  ];

let margin = { top: 30, right: 30, bottom: 70, left: 60 },
        width = 460 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    const xScale = d3.scaleLinear()
                      .domain([0, d3.max(dataArr, d => d.value)])
                      .range([0, width]);

    const yScale = d3.scaleBand()
                      .domain(dataArr.map(d => d.propname))
                      .range(0, height);

    let svg = d3.select('.svg-container').append('svg')
      .attr('width', 460)
      .attr('height', 460);
    svg.selectAll('rect').data(dataArr)
      .enter().append('rect')
      .attr('y', yScale(d.propname))
      .attr('width', d => xScale(d.value))
      .attr('height', yScale.bandwidth());
  }

我现在看不到我在做什么错。