Question

我正在尝试使用D3.js

创建带刻度的条形图

图表适用于线性刻度，但我无法使用序数刻度。无法正确计算序数范围。

我收到以下错误：

未捕获的TypeError：d3.scaleOrdinal（...）。domain（...）。rangeRoundBands不是函数

对此问题的任何帮助将不胜感激。

提前致谢。

我的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bar Graph</title>
        <script type="text/javascript" src="d3/d3.js"></script>
    </head>
    <style type="text/css">
        .bar{
            display: inline-block;
            margin-right: 2px;
        }
    </style>
    <body>
        <script type="text/javascript">
            var data = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 27, 29, 5, 32];
            var w = window.innerWidth;
            var h = window.innerHeight;
            var linearScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, w]);
            var ordinalScale = d3.scaleOrdinal()
                           .domain(d3.range(data.length))
                           .rangeRoundBands([0, w], 0.05);
            var svg = d3.select("body")     //create the canvas
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            var bar = svg.selectAll("rect")
                         .data(data)
                         .enter()
                         .append("rect")      //create rect element
                         .attr("class", "bar")
                         .attr("x", function(d, i){return ordinalScale(i)})
                         .attr("y", function(d){return (10 * Math.max.apply(null, data)) - (8 * d);})  //set co-ordinates
                         .attr("width", function(d){return ordinalScale(d)})
                         .attr("height", function(d){return 8 * d;})
                         .attr("fill", function(d){
                            return 'rgb('+d*2 + ',' + d*4 + ',' + d*8 + ')';
                         });
        </script>
    </body>
</html>

PS：我也尝试过rangeBands但得到相同的错误并且范围返回离散值（起点和终点）。另外，我正在使用d3v4。

D3.js中的Ordinal Scales和RangeRoundBands

0 个答案: