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

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

items.add(item); // compile error

然后将var canvasWidth= parseInt(canvas.style("width")); var canvasHeight= parseInt(canvas.style("height"));更改为var y0= d3.scaleBand().paddingInner(0.1).range([0, height]);

D3 .bandwidth（）返回NaN

1 个答案: