我是 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
,没有遇到这个问题。
最佳答案
我想出了答案: 我忘了添加以下几行:
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]);
关于javascript - D3 .bandwidth() 返回 NaN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52032372/