javascript - D3 .bandwidth() 返回 NaN

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]);