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

【问题标题】：d3.js - Bar chart won't display with scaled3.js - 条形图不会按比例显示
【发布时间】：2013-10-09 04:55:34
【问题描述】：

我更新了我的代码以使用 D3 中的缩放方法。但是，从那时起我的条形图将不会显示。这个问题的原因是什么？

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) + ")";});

【问题讨论】：

我看不到您在哪里设置 x、y 比例。 x 应该是 d3.scale.ordinal，y 应该是 d3.scale.linear。您是否尝试过从基本的条形图模板开始？ vida.io/documents/HzRf7K4Cb3LP73fjs
我可以通过将 .attr("width", function(d) {return widthScale;}) 更改为 .attr("width", widthScale) 来修复它。谢谢。 @PhucDo

标签： javascript svg charts d3.js bar-chart

【解决方案1】：

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

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

【讨论】：