归一化堆积条形图绘图问题。所有rect均分，与数据无关

debugcn 发表于 Dev

托马斯·塞巴斯蒂安（Thomas Sebastian）

嗨，我在这里使用此示例来构造标准化的堆叠条形图。我的数据结构与通常使用的数据结构有所不同。我可以绘制图表，但是在某个地方，计算变得混乱了，我很难弄清楚它。我创造了一支笔。如您所见，条形图平均分配，我认为是应该发生的事情。该y0, y1计算未正确情况是什么，我猜。感谢您为解决此问题所做的一切努力。

程式码片段

                    var normalizedStackedData = dataset;
                    var excludedYaxisKey = "sum(quantity)";
                    console.log(normalizedStackedData);
                    checkLength(normalizedStackedData);

                function plotNormalizedStack(data) {


                    var x = d3.scale.ordinal()
                        .rangeRoundBands([0, WIDTH], .1);

                    var y = d3.scale.linear()
                        .rangeRound([HEIGHT, 0]);

                    var color = d3.scale.ordinal()
                        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);


                    var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom")
                        .tickValues(_arr.map(function(d) {
                            return d[excludedYaxisKey];
                        }));

                    var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient("left")
                        .tickFormat(d3.format(".0%"));

                    appendResponsiveSvg();

                    svg.append("g")
                        .attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")");

                    color.domain(d3.keys(data[0]).filter(function(key) { return key !== excludedYaxisKey; }));

                    var nested_data = d3.nest()
                        .key(function(d) { return d["state"]; })
                        .entries(normalizedStackedData);

                    var domain = [excludedYaxisKey]//Object.keys(d);
                    var y0;

                    nested_data.forEach(function(_data) {
                        _data.values.map(function(d, index){
                             y0 = 0;
                            _data.groupedItem = [];
                            for (var i = 0; i < (_data.values).length; i++) {
                                _data.groupedItem.push(domain.map(function(name) { return {label: "quantity"+(i+1) ,name: name, y0: y0, y1: y0 += +d[name]}; })[0]);
                            }
                            _data.groupedItem.forEach(function(d) { 
                                d.y0 /= y0; 
                                d.y1 /= y0; 
                            });
                        });
                    });

                    data = nested_data;

                    data.sort(function(a, b) { return b.groupedItem[0].y1 - a.groupedItem[0].y1; });

                    x.domain(data.map(function(d) { return d["key"]; }));

                    svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + HEIGHT + ")")
                      .call(xAxis);

                    svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis);

                    var state = svg.selectAll(".state")
                      .data(data)
                    .enter().append("g")
                      .attr("class", "state")
                      .attr("transform", function(d) { return "translate(" + x(d["key"]) + ",0)"; });

                    state.selectAll("rect")
                      .data(function(d) { return d.groupedItem; })
                    .enter().append("rect")
                      .attr("width", x.rangeBand())
                      .attr("y", function(d) { 
                        return y(d.y1); 
                        })
                      .attr("height", function(d) { 
                        return y(d.y0) - y(d.y1); 
                        })
                      .style("fill", function(d) { return color(d.label); });

                }
                plotNormalizedStack(normalizedStackedData);

标记

我发现您的堆栈数据操作步骤非常难于阅读和调试。由于您没有变量domain（您正在创建一个数组以.map在其上运行），因此只需将其扔掉并为感兴趣的特定属性编写代码即可。考虑到这一点，它简化了可读性：

nested_data.forEach(function(d0) {
    d0.groupedItem = [];
    var y0 = 0;
    d0.values.forEach(function(d1){
      d0.groupedItem.push({
        y0: y0,
        y1: y0 += +d1["sum(quantity)"],
        label: d1["zip"]
      });
    });
    d0.groupedItem.forEach(function(d1){
      d1.y0 /= y0;
      d1.y1 /= y0;
    });
  });

完整的运行代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <style>
    body {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .browser text {
      text-anchor: end;
    }
    
    svg {
      width: 100%;
      height: 400px;
    }
  </style>
</head>

<body>
  <svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="-80 -10 1450 600" class="svg-content-responsive"></svg>

  <script>
    function getRes(data) {

      var _len = data.length;
      var offset = 20;
      var _range = Math.round(_len / offset);
      //console.log("myRange : ", _range);
      var _arr = [];
      var _res = [];

      for (var i = 0; i < 20; i++) {
        if (_range * i < data.length)
          _res.push(data[_range * i]);
      }
      //console.log(_res);
      return _res;
    }

    function checkLength(data) {
      if (data.length >= 50) {
        _arr = getRes(data);
      } else {
        _arr = data;
      }
    }

    var WIDTH = 1250,
      HEIGHT = 500,
      MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
      },
      xoffset = 22,
      svg = [],
      tooltip = [];

    var dataset = [{
      "state": "AK",
      "zip": "99546",
      "sum(quantity)": "623.95"
    }, {
      "state": "AL",
      "zip": "35440",
      "sum(quantity)": "265.40"
    }, {
      "state": "CA",
      "zip": "93510",
      "sum(quantity)": "682.81"
    }, {
      "state": "CA",
      "zip": "95220",
      "sum(quantity)": "367.14"
    }, {
      "state": "GA",
      "zip": "30102",
      "sum(quantity)": "609.85"
    }, {
      "state": "GA",
      "zip": "30103",
      "sum(quantity)": "691.53"
    }, {
      "state": "IA",
      "zip": "50001",
      "sum(quantity)": "597.52"
    }, {
      "state": "IA",
      "zip": "50601",
      "sum(quantity)": "741.38"
    }, {
      "state": "IL",
      "zip": "62214",
      "sum(quantity)": "564.20"
    }, {
      "state": "LA",
      "zip": "70420",
      "sum(quantity)": "576.45"
    }, {
      "state": "LA",
      "zip": "70511",
      "sum(quantity)": "377.81"
    }, {
      "state": "LA",
      "zip": "70710",
      "sum(quantity)": "398.69"
    }, {
      "state": "MD",
      "zip": "20606",
      "sum(quantity)": "423.71"
    }, {
      "state": "MD",
      "zip": "20607",
      "sum(quantity)": "544.17"
    }, {
      "state": "MD",
      "zip": "21005",
      "sum(quantity)": "233.74"
    }, {
      "state": "MD",
      "zip": "21520",
      "sum(quantity)": "601.30"
    }, {
      "state": "ME",
      "zip": "4406",
      "sum(quantity)": "238.58"
    }, {
      "state": "ME",
      "zip": "4606",
      "sum(quantity)": "412.01"
    }, {
      "state": "MS",
      "zip": "39735",
      "sum(quantity)": "486.00"
    }, {
      "state": "MT",
      "zip": "59001",
      "sum(quantity)": "434.12"
    }, {
      "state": "ND",
      "zip": "58001",
      "sum(quantity)": "122.81"
    }, {
      "state": "ND",
      "zip": "58002",
      "sum(quantity)": "883.31"
    }, {
      "state": "NE",
      "zip": "68001",
      "sum(quantity)": "605.27"
    }, {
      "state": "NJ",
      "zip": "8205",
      "sum(quantity)": "630.63"
    }, {
      "state": "NM",
      "zip": "87510",
      "sum(quantity)": "1059.78"
    }, {
      "state": "NY",
      "zip": "12404",
      "sum(quantity)": "573.52"
    }, {
      "state": "NY",
      "zip": "12405",
      "sum(quantity)": "911.70"
    }, {
      "state": "NY",
      "zip": "13606",
      "sum(quantity)": "295.05"
    }, {
      "state": "NY",
      "zip": "14410",
      "sum(quantity)": "91.27"
    }, {
      "state": "OH",
      "zip": "43802",
      "sum(quantity)": "234.60"
    }, {
      "state": "OK",
      "zip": "73520",
      "sum(quantity)": "331.16"
    }, {
      "state": "OK",
      "zip": "74330",
      "sum(quantity)": "679.95"
    }, {
      "state": "OK",
      "zip": "74720",
      "sum(quantity)": "723.63"
    }, {
      "state": "OK",
      "zip": "74821",
      "sum(quantity)": "624.22"
    }, {
      "state": "OR",
      "zip": "97810",
      "sum(quantity)": "229.12"
    }, {
      "state": "PA",
      "zip": "15410",
      "sum(quantity)": "558.51"
    }, {
      "state": "PA",
      "zip": "15520",
      "sum(quantity)": "859.19"
    }, {
      "state": "PA",
      "zip": "15610",
      "sum(quantity)": "656.57"
    }, {
      "state": "PA",
      "zip": "15611",
      "sum(quantity)": "303.19"
    }, {
      "state": "PA",
      "zip": "16820",
      "sum(quantity)": "763.54"
    }, {
      "state": "PA",
      "zip": "17301",
      "sum(quantity)": "314.21"
    }, {
      "state": "PA",
      "zip": "18010",
      "sum(quantity)": "522.25"
    }, {
      "state": "PA",
      "zip": "19001",
      "sum(quantity)": "541.86"
    }, {
      "state": "PA",
      "zip": "19501",
      "sum(quantity)": "314.65"
    }, {
      "state": "SC",
      "zip": "29426",
      "sum(quantity)": "387.74"
    }, {
      "state": "TX",
      "zip": "77326",
      "sum(quantity)": "497.49"
    }, {
      "state": "TX",
      "zip": "79311",
      "sum(quantity)": "619.80"
    }, {
      "state": "TX",
      "zip": "79699",
      "sum(quantity)": "546.51"
    }, {
      "state": "TX",
      "zip": "79713",
      "sum(quantity)": "424.77"
    }, {
      "state": "VA",
      "zip": "23001",
      "sum(quantity)": "340.39"
    }, {
      "state": "VA",
      "zip": "23301",
      "sum(quantity)": "446.56"
    }, {
      "state": "VT",
      "zip": "5640",
      "sum(quantity)": "548.90"
    }, {
      "state": "WA",
      "zip": "98520",
      "sum(quantity)": "223.90"
    }, {
      "state": "WI",
      "zip": "54101",
      "sum(quantity)": "680.80"
    }, {
      "state": "WI",
      "zip": "54405",
      "sum(quantity)": "485.17"
    }, {
      "state": "WV",
      "zip": "25606",
      "sum(quantity)": "404.94"
    }];

    function appendResponsiveSvg() {
      svg = d3.select("svg")
        .attr("width", 100 + "%")
        .attr("height", 100 + "%")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "-80 -10 " + (WIDTH + 200) + " " + (HEIGHT + 100))
        .classed("svg-content-responsive", true);

      return svg;
    }

    var normalizedStackedData = dataset;
    var excludedYaxisKey = "sum(quantity)";
    //console.log(normalizedStackedData);
    checkLength(normalizedStackedData);

    function plotNormalizedStack(data) {


      var x = d3.scale.ordinal()
        .rangeRoundBands([0, WIDTH], .1);

      var y = d3.scale.linear()
        .rangeRound([HEIGHT, 0]);

      var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);


      var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(d3.format(".0%"));

      appendResponsiveSvg();

      svg.append("g")
        .attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")");

      color.domain(d3.keys(data[0]).filter(function(key) {
        return key !== excludedYaxisKey;
      }));

      var nested_data = d3.nest()
        .key(function(d) {
          return d["state"];
        })
        .entries(normalizedStackedData);

      var domain = [excludedYaxisKey] //Object.keys(d);
      var y0;
      
      nested_data.forEach(function(d0) {
        d0.groupedItem = [];
        var y0 = 0;
        d0.values.forEach(function(d1){
          d0.groupedItem.push({
            y0: y0,
            y1: y0 += +d1["sum(quantity)"],
            label: d1["zip"]
          });
        });
        d0.groupedItem.forEach(function(d1){
          d1.y0 /= y0;
          d1.y1 /= y0;
        });
      });

      data = nested_data;
      
      data.sort(function(a, b) {
        return b.groupedItem[0].y1 - a.groupedItem[0].y1;
      });

      x.domain(data.map(function(d) {
        return d["key"];
      }));

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + HEIGHT + ")")
        .call(xAxis);

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

      var state = svg.selectAll(".state")
        .data(data)
        .enter().append("g")
        .attr("class", "state")
        .attr("transform", function(d) {
          return "translate(" + x(d["key"]) + ",0)";
        });

      state.selectAll("rect")
        .data(function(d) {
          return d.groupedItem;
        })
        .enter().append("rect")
        .attr("width", x.rangeBand())
        .attr("y", function(d) {
          return y(d.y1);
        })
        .attr("height", function(d) {
          return y(d.y0) - y(d.y1);
        })
        .style("fill", function(d) {
          return color(d.label);
        });

    }
    plotNormalizedStack(normalizedStackedData);
  </script>

</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-17

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

归一化堆积条形图绘图问题。所有rect均分，与数据无关

归一化堆积条形图绘图问题。所有rect均分，与数据无关

Seaborn归一化条形图

如何标准化数据并创建堆积条形图？

堆积的条形图不显示唯一的数据集

堆积的条形图图例问题jqplot

堆积的条形图图例问题jqplot

R堆积条形图问题

熊猫堆积条形图问题

数据框水平堆积条形图

堆积条形图

堆积条形图

堆积条形图

没有填充的堆积条形图？

一栏堆积条形图

使用crossfilter / dc.js绘制面积归一化条形图的有效方法？

堆积的条形图。创建一个包含所有类别信息的集成工具提示（Altair）

R ggplot2堆叠条形图通过列的值归一化

R ggplot2堆叠条形图通过列的值归一化

JQPLOT堆积条形图数组输入问题

Matplotlib：堆积的条形图

排序堆积的条形图

ChartJs堆积条形图

R堆积条形图

ggplot的堆积条形图

堆积条形图反转

簇堆积条形图

熊猫堆积的条形图

带有一些负值和有序类别的堆积条形图

具有特定数据结构的堆积条形图百分比

如何正确格式化堆积的条形图