返回NaN的D3 .bandwidth()

Question

我是d3的新手。我试图解决这个问题已经有一段时间了，但我在这里找不到任何类似的问题。

我正在尝试创建一个分组条形图(类似于https://bl.ocks.org/mbostock/3887051)。

这是我当前代码的一部分：

    var width = "100%";
    var height = "96vh";


    var canvas = d3.select("body")
                   .append('svg')
                   .attr('width',width)
                   .attr('height', height)
                   .style("border", "2px solid black");
   var y0   = d3.scaleBand()
                .paddingInner(0.1)
                .range([0, height]);    

    var y1 = d3.scaleBand()
               .padding(0.05);  

    var x = d3.scaleLinear()    
              .rangeRound([0, width]);

    var z = d3.scaleOrdinal()
            .range(["blue","green"])

    d3.csv("data.csv", data =>{
        console.log(data);

        //inner columns domain
        var keys = d3.keys(data[0]).slice(1,4); 

        x.domain(d3.extent(data, d=>d['Open rate']));
        y0.domain(data.map(d => d.Industry));
        y1.domain(keys).rangeRound([0,y0.bandwidth()]); 

        console.log(y0.bandwidth());
});

但是，最后一行console.log(y0.bandwidth())返回NaN。我还没能弄明白为什么。

我之前用过类似的scaleOrdinal，并没有遇到这个问题。

Answer 1

我想出了答案:我忘了添加以下几行：

    var canvasWidth= parseInt(canvas.style("width"));
    var canvasHeight= parseInt(canvas.style("height"));

并将var y0= d3.scaleBand().paddingInner(0.1).range([0, height]);更改为var y0= d3.scaleBand().paddingInner(0.1).range([0, canvasHeight]);