javascript - D3.JS yScale 仅针对一个值返回 "undefined"

Question

我第一次使用D3.js，我用这段代码画了一个条形图。

var dataset = [20, 55, 30, 40, 50, 35, 97, 75, 100, 45];
var w = 500;
var h =100;
var xScale = d3.scaleBand()
                .domain(d3.range(dataset.length))
                .rangeRound([0,w])
                .paddingInner(0.05);

var yScale = d3.scaleBand()
                .domain(d3.range(d3.max(dataset)))
                .rangeRound([0,h]);

var svg = d3.select("#chart")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d,i) {
        return xScale(i);
    })
    .attr("y",function(d){console.log(yScale(d)); return h - yScale(d);})
    .attr("width", xScale.bandwidth())
    .attr("fill", function(d) {if(d<50) { return "blue" }
            else if (d>=50) { return "red" }; })
    .attr("height", function(d){return yScale(d);
    });

但是我得到了这个结果:

我无法理解为什么我的某个特定值会“未定义”。

Answer 1

问题在于 yScale 域，并使用 d3.range 设置域。

d3.range(100) 创建一个包含 100 个元素的数组，其值从 0 到 99。因此，当您尝试获取 yScale(100) 时，“100”不在域中。

例如，对于您的数据，您建议使用线性比例

var yScale = d3.scaleLinear()
 .domain([0, d3.max(dataset)])
 .rangeRound([0,h]);

或者如果需要使用d3.range，则将元素数量设置为1+最大值，例如:

var yScale = d3.scaleRange()
.domain(d3.range(d3.max(dataset) + 1))
.rangeRound([0,h]);