D3.js将数组数据映射从规范化更改为规则堆叠图

d3.js change array data mapping from normalized to regular stacked chart

本文关键字：规则 规范化 js 数组 数据 映射 D3      更新时间：2023-09-26

我可以创建一个规范化的堆叠条形图和一个常规的堆叠条形图。我希望能够根据用户的选择在两者之间进行转换。

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

        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"永久地更改为矩形坐标数组，这是伟大的…除非我想展示一个非标准化的堆叠条形图。如果我试图传递到下面的函数，我将得到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
            }));
    }
我相信有一个更优雅的方法来解决这个问题。欢迎任何建议。

我明白了。我只是在数据中添加了更多的元素。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
            }));
    }
相关文章：