Question

我更新了我的代码以使用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) + ")";});

Answer 1

D3刻度只是一个函数，它将给定输入域（您的数据值，0到max）的值转换为指定的输出范围（图表的宽度）。因此，您必须将比例应用于您的数据，例如widthScale( d )。现在，您要将widthScale函数分配给width的{{1}}属性，而不是输出值。

查看工作小提琴：http://jsfiddle.net/S92u4/

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

1 个答案: