D3 .bandwidth() returning NaN

问题

I am new to d3. I have been trying to solve this for some time, but I couldn't find any similar issues here.

I am trying to create a grouped bar chart (something like https://bl.ocks.org/mbostock/3887051).

This is a section of my current code:

    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());
});

However, the last line console.log(y0.bandwidth()) returns NaN. I haven't been able to figure out why.

I had used a similar scaleOrdinal earlier, and didn't face this issue.

回答1:

I figured out the answer: I had forgotten to add the following lines:

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

And change var y0= d3.scaleBand().paddingInner(0.1).range([0, height]); to var y0= d3.scaleBand().paddingInner(0.1).range([0, canvasHeight]);

来源：https://stackoverflow.com/questions/52032372/d3-bandwidth-returning-nan