Question

我想将条形高度缩放到SVG的大小。 http://jsfiddle.net/6d7984oa/

function d3_bar(s, dataset, barPadding) {

    var self = s[0],
        w = parseInt(d3.select(self).style("width")),
        h = parseInt(d3.select(self).style("height")),

        svg = d3.select(self)
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - d;
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {

            return d;
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

}

我已经尝试了很多东西，但数学永远无法运作。

    .attr("height", function(d) {

        var min = 1,
            max = h,
            diff = max - min;

        return h - ( diff ? ((d - min) / diff) * h : 1 );
    })

挣扎着看看如何做到这一点。

Answer 1

你应该使用D3刻度。可以在这里找到很多信息：Quantitative scales。

基本线性刻度如下：

var yScale = d3.scale.linear()
                     .domain([0, d3.max(yourdata)])
                     .range([0,h]);

请查看d3.max（）函数。基本上它会查找给定数组中的最大值，但是如果数据是对象数组，则可以使用函数指定要查看的值。

线性刻度可以解释如下：域代表进入的值，需要缩放为其他值的值。您可以提供一系列值，即＆＃39; []＆＃39;之间的最小值和最大值。在您的情况下，这是表示高度的数据。

规模的范围是出来的。因此，您可以定义最小和最大可能结果，在我们的示例中为0和svg的宽度。

那么当您使用秤时会发生什么？好吧，说你的数据从0到100，你的svg的宽度是50个单位。当您的数据为0时，比例将返回0，当您的数据为100时，您的比例将返回50.因此，如果您的数据为50，那么比例将返回.... 25.我在这里选择简单的数字，它在更困难的情况下效果也很好:-)。

编辑：如果忘记提及如何使用比例，请说出你的身高属性：

svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - d;
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d){return yScale(d);})
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

当然假设您将比例命名为＆＃39; yScale＆＃39;。

编辑2 ：我的比例代码在范围内出错。缩放y轴时，需要设置范围内的高度，而不是宽度。所以我修好了。

此外，在设置rect的y属性时，您还需要使用该缩放。否则，条形高度会缩放，但匹配的y位置不会，导致rect标记的位置不正确。我应该提到这一点。这是正确的代码：

svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - yScale(d);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d){return yScale(d);})
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

您可以看到我也使用yScale更改了y属性函数。

我为错误的代码道歉，我将来应该更好地检查它。

将条的高度缩放到容器大小

1 个答案: