d3.js 将数组数据映射从规范化更改为常规堆积图答案

【问题标题】：d3.js change array data mapping from normalized to regular stacked chartd3.js 将数组数据映射从规范化更改为常规堆积图
【发布时间】：2015-08-08 07:40:58
【问题描述】：

我能够创建标准化堆积条形图和常规堆积条形图。我希望能够根据用户的选择在两者之间进行转换。

我创建了一个函数，使用以下代码将我的数据映射到正态分布：

        function dataMapNormalize(data) {
        /*
         http://jsfiddle.net/dB96T/4/
         manually create data points for stacked bar chart with y0 values
         */

         data = data.map(function (d, i) {
            console.log("length:" + d.length);
            var j,
                columnTotal = 0,
                y0 = 0;
            for (j = 0; j < d.length; j++) {
                columnTotal += d[j].value;
            }

            for (j = 0; j < d.length; j++) {
                var y = d[j].value / columnTotal;
                d[j] = {x: i, y: y, y0: y0};
                y0 += y;
            }
            return d;
        });
        console.log(JSON.stringify(data));

        y = d3.scale.linear()
            .domain([0, 1])
            .range([height, 0]);

        x = d3.scale.ordinal()
            .rangeRoundBands([100, width], .05)
            .domain(data.map(function (d) {
                return d[0].x
            }));
    }

dataMapNormalize(ond);

此函数将我的数组“ond”永久更改为矩形坐标数组，这很棒……除非我想显示非标准化堆积条形图。如果我尝试将 ond 传递给下面的函数，我会得到 NAN。

function dataMapStack(data) {

        var stackTotals  = new Array();

        data = data.map(function (d, i) {
            var j,
                columnTotal = 0,
                y0 = 0;
            for (j = 0; j < d.length; j++) {
                columnTotal += d[j].value;
            }
            stackTotals.push(columnTotal);
            for (j = 0; j < d.length; j++) {
                var y = d[j].value;
                d[j] = {x: i, y: y, y0: y0};
                y0 += y;
            }
            return d;
        });

        y = d3.scale.linear()
            .domain([0, d3.max(stackTotals)])
            .range([height, 0]);

        x = d3.scale.ordinal()
            .rangeRoundBands([100, width], .05)
            .domain(data.map(function (d) {
                return d[0].x
            }));
    }

我确信有一种更优雅的方法可以解决这个问题。打开任何建议。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我想通了。我只是在我的 data.map 函数中添加了更多元素，因此数组现在具有 yp（百分比/标准化）和 y（常规堆栈）值。（呃！）我很可能会将 x/y 比例移出函数。这是一个很大的帮助：http://bl.ocks.org/tmaybe/6144082

function dataMap(data) {
        /*
         http://jsfiddle.net/dB96T/4/

         create rectangle dimensions for stacked bar chart

         yp = y percentage/normalized
         y = regular stack
         */

         data = data.map(function (d, i) {
            console.log("length:" + d.length);
            var j,
                columnTotal = 0,
                yp0 = 0,
                y0 = 0;

            // Count total of each stack
            for (j = 0; j < d.length; j++) {
                columnTotal += d[j].value;
            }

            for (j = 0; j < d.length; j++) {
                var y = d[j].value;
                var yp = d[j].value / columnTotal;
                d[j] = {x: i, yp: yp, yp0: yp0, y:y, y0:y0};
                yp0 += yp;
                y0 +=y;
            }
            return d;
        });
        console.log(JSON.stringify(data));

        y = d3.scale.linear()
            .domain([0, 1])
            .range([height, 0]);

        x = d3.scale.ordinal()
            .rangeRoundBands([100, width], .05)
            .domain(data.map(function (d) {
                return d[0].x
            }));
    }

【讨论】：