d3.js - 条形图不会以比例显示

d3.js - Bar chart won't display with scale

本文关键字:显示 js 条形图 d3      更新时间:2023-09-26

我更新了我的代码以使用 D3 中的 scale 方法。但是,从那时起,我的条形图将不会显示。此问题的原因是什么?

var dataset = [ ];
    for (var i = 0; i < 14; i++) {var newNumber = Math.round(Math.random() * 70);
    dataset.push(newNumber);}
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
    var widthScale = d3.scale.linear()
                    .domain([0,d3.max(dataset)])
                    .range([0,w]);
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 3)
            .attr("y", function (d,i) {return i* 36;})
            .attr("width", function(d) {return widthScale;})
            .attr("height", h / dataset.length - barPadding)
            .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";});

D3 刻度只是一个函数,将给定输入域的值(您的数据值,0 到最大值(转换为指定的输出范围(图表的宽度(。因此,您必须将比例应用于您的数据,例如 widthScale( d ) .现在,您正在将widthScale函数分配给rectwidth属性,而不是输出值。

参见工作小提琴:http://jsfiddle.net/S92u4/