javascript - 关于D3堆积条形图结构-6ren

javascript - 关于D3堆积条形图结构

转载作者：行者123 更新时间：2023-11-28 06:17:12

当数据采用正常格式时，我可以轻松创建 d3 堆积条形图(垂直)。但这种格式，我发现很难绘制图表。如果有人能给我指出一个示例，其中数据采用我下面给出的格式，我将非常感激。我尝试了很多例子。全部使用不同的结构。至少让我知道这种结构是否可以堆叠条形。我的格式。

[
  {
    "key": "AK",
    "values": [
      {
        "state": "AK",
        "zip": "99546",
        "sum(quantity)": "623.95"
      }
    ]
  },
  {
    "key": "AL",
    "values": [
      {
        "state": "AL",
        "zip": "35440",
        "sum(quantity)": "265.40"
      }
    ]
  },
  {
    "key": "CA",
    "values": [
      {
        "state": "CA",
        "zip": "93510",
        "sum(quantity)": "682.81"
      },
      {
        "state": "CA",
        "zip": "95220",
        "sum(quantity)": "367.14"
      }
    ]
  },
  {
    "key": "GA",
    "values": [
      {
        "state": "GA",
        "zip": "30102",
        "sum(quantity)": "609.85"
      },
      {
        "state": "GA",
        "zip": "30103",
        "sum(quantity)": "691.53"
      }
    ]
  },
  {
    "key": "IA",
    "values": [
      {
        "state": "IA",
        "zip": "50001",
        "sum(quantity)": "597.52"
      },
      {
        "state": "IA",
        "zip": "50601",
        "sum(quantity)": "741.38"
      }
    ]
  },
  {
    "key": "IL",
    "values": [
      {
        "state": "IL",
        "zip": "62214",
        "sum(quantity)": "564.20"
      }
    ]
  },
  {
    "key": "LA",
    "values": [
      {
        "state": "LA",
        "zip": "70420",
        "sum(quantity)": "576.45"
      },
      {
        "state": "LA",
        "zip": "70511",
        "sum(quantity)": "377.81"
      },
      {
        "state": "LA",
        "zip": "70710",
        "sum(quantity)": "398.69"
      }
    ]
  },
  {
    "key": "MD",
    "values": [
      {
        "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"
      }
    ]
  },
  {
    "key": "ME",
    "values": [
      {
        "state": "ME",
        "zip": "4406",
        "sum(quantity)": "238.58"
      },
      {
        "state": "ME",
        "zip": "4606",
        "sum(quantity)": "412.01"
      }
    ]
  },
  {
    "key": "MS",
    "values": [
      {
        "state": "MS",
        "zip": "39735",
        "sum(quantity)": "486.00"
      }
    ]
  },
  {
    "key": "MT",
    "values": [
      {
        "state": "MT",
        "zip": "59001",
        "sum(quantity)": "434.12"
      }
    ]
  },
  {
    "key": "ND",
    "values": [
      {
        "state": "ND",
        "zip": "58001",
        "sum(quantity)": "122.81"
      },
      {
        "state": "ND",
        "zip": "58002",
        "sum(quantity)": "883.31"
      }
    ]
  },
  {
    "key": "NE",
    "values": [
      {
        "state": "NE",
        "zip": "68001",
        "sum(quantity)": "605.27"
      }
    ]
  },
  {
    "key": "NJ",
    "values": [
      {
        "state": "NJ",
        "zip": "8205",
        "sum(quantity)": "630.63"
      }
    ]
  },
  {
    "key": "NM",
    "values": [
      {
        "state": "NM",
        "zip": "87510",
        "sum(quantity)": "1059.78"
      }
    ]
  },
  {
    "key": "NY",
    "values": [
      {
        "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"
      }
    ]
  },
  {
    "key": "OH",
    "values": [
      {
        "state": "OH",
        "zip": "43802",
        "sum(quantity)": "234.60"
      }
    ]
  },
  {
    "key": "OK",
    "values": [
      {
        "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"
      }
    ]
  },
  {
    "key": "OR",
    "values": [
      {
        "state": "OR",
        "zip": "97810",
        "sum(quantity)": "229.12"
      }
    ]
  },
  {
    "key": "PA",
    "values": [
      {
        "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"
      }
    ]
  },
  {
    "key": "SC",
    "values": [
      {
        "state": "SC",
        "zip": "29426",
        "sum(quantity)": "387.74"
      }
    ]
  },
  {
    "key": "TX",
    "values": [
      {
        "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"
      }
    ]
  },
  {
    "key": "VA",
    "values": [
      {
        "state": "VA",
        "zip": "23001",
        "sum(quantity)": "340.39"
      },
      {
        "state": "VA",
        "zip": "23301",
        "sum(quantity)": "446.56"
      }
    ]
  },
  {
    "key": "VT",
    "values": [
      {
        "state": "VT",
        "zip": "5640",
        "sum(quantity)": "548.90"
      }
    ]
  },
  {
    "key": "WA",
    "values": [
      {
        "state": "WA",
        "zip": "98520",
        "sum(quantity)": "223.90"
      }
    ]
  },
  {
    "key": "WI",
    "values": [
      {
        "state": "WI",
        "zip": "54101",
        "sum(quantity)": "680.80"
      },
      {
        "state": "WI",
        "zip": "54405",
        "sum(quantity)": "485.17"
      }
    ]
  },
  {
    "key": "WV",
    "values": [
      {
        "state": "WV",
        "zip": "25606",
        "sum(quantity)": "404.94"
      }
    ]
  }
]

这里key应该充当x轴。 values 应充当 y 轴 (sum(quantity))。值内的对象应形成一个堆叠条。

例如:CA 键的 values 键内有两个对象，它们应该形成一个带有两个堆栈的条形。希望你能明白。

我并不是有意回避代码。我没有这个结构的。我什至不知道如何使用这些数据。我通过使用 d3 的巢得到了这个。

请帮忙。

最佳答案

我必须自己做，因为我别无选择(感谢我的同事一如既往地帮助我)。发布下面的代码片段。这也是 codepen 的链接。谁知道呢，这可能会在未来节省某人的时间和精力。这是代码。

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

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 verticalStackedData = multiLineData;
console.log(verticalStackedData);

function plotVerticallyStacked(data) {

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

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

  // Color range - add your favorites here
  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(".2s"));

  appendResponsiveSvg();

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

  var domain = ["sum(quantity)"];

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

  });

  data.sort(function(a, b) {
    return b.total - a.total;
  });

  x.domain(data.map(function(d) {
    return d.values[0]["sum(quantity)"];
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.total;
  })]);

  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", "g")
    .attr("transform", function(d) {
      return "translate(" + x((d.values[0])["sum(quantity)"]) + ",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);
    });
}
plotVerticallyStacked(verticalStackedData);

关于javascript - 关于D3堆积条形图结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35859517/

文章推荐： javascript - 在 Javascript 中访问变量

文章推荐： javascript - 在 Appcelerator 中自动滚动到 View 末尾

文章推荐： javascript - jquery 文件选择超链接

c - 结构 |结构/union 的不完整类型错误
我目前正在尝试基于哈希表构建字典。逻辑是:有一个名为 HashTable 的结构，其中包含以下内容: HashFunc HashFunc; PrintFunc PrintEntry; CompareF
c++ - 如何删除指向(结构/对象)的指针而不破坏(结构/对象)内部的指针？
如果我有一个指向结构/对象的指针，并且该结构/对象包含另外两个指向其他对象的指针，并且我想删除“包含这两个指针的对象而不破坏它所持有的指针”——我该怎么做这样做吗？指向对象 A 的指针(包含指向对象
go - 如何访问该“结构” slice 的新“类型”中的“结构”字段？
像这样的代码 package main import "fmt" type Hello struct { ID int Raw string } type World []*Hell
mysql - 将 CSV 移动到 MySQL 关系数据库的第一步。 CSV 结构!= MySQL 结构
我有一个采用以下格式的 CSV: Module, Topic, Sub-topic 它需要能够导入到具有以下格式的 MySQL 数据库中: CREATE TABLE `modules` ( `id
c++ - 将 POD 结构/结构 vector 复制到 vector 的最优雅方式
通常我使用类似的东西 copy((uint8_t*)&POD, (uint8_t*)(&POD + 1 ), back_inserter(rawData)); copy((uint8_t*)&PODV
apache-spark - Spark : Union can only be performed on tables with the compatible column types. 结构<名称，ID> != 结构
错误 : 联合只能在具有兼容列类型的表上执行。结构(层:字符串，skyward_number:字符串，skyward_points:字符串)<> 结构(skyward_number:字符串，层:字符
条件跳转或移动取决于未初始化的值、结构
我有一个指向结构的指针数组，我正在尝试使用它们进行 while 循环。我对如何准确初始化它并不完全有信心，但我一直这样做: Entry *newEntry = malloc(sizeof(Entry)
C "if"结构
我正在学习 C，我的问题可能很愚蠢，但我很困惑。在这样的函数中: int afunction(somevariables) { if (someconditions)
创建列表的列表(结构)
我现在正在做一项编程作业，我并没有真正完全掌握链接，因为我们还没有涉及它。但是我觉得我需要它来做我想做的事情，因为数组还不够我创建了一个结构，如下 struct node { float coef;
C符号常量+结构
给定以下代码片段: #include #include #define MAX_SIZE 15 typedef struct{ int touchdowns; int intercepti
Checknullarray 结构
struct contact list[3]; int checknullarray() { for(int x=0;x<10;x++) { if(strlen(con
javascript "for (;;);"结构
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Empty “for” loop in Facebook ajax what does AJAX call
C# 结构 "this = ...."
我刚刚在反射器中浏览了一个文件，并在结构构造函数中看到了这个: this = new Binder.SyntaxNodeOrToken(); 我以前从未见过该术语。有人能解释一下这个赋值在 C# 中的
用于命名字符串常量的 Python 结构
我经常使用字符串常量，例如: DICT_KEY1 = 'DICT_KEY1' DICT_KEY2 = 'DICT_KEY2' ... 很多时候我不介意实际的文字是什么，只要它们是独一无二的并且对人类读
用指针初始化 C 结构
我是 C 的新手，我不明白为什么下面的代码不起作用: typedef struct{ uint8_t a; uint8_t* b; } test_struct; test_struct
可以像内置类型一样直接分配常量值的 .NET 结构
您能否制作一个行为类似于内置类之一的结构，您可以在其中直接分配值而无需调用属性？前任: RoundedDouble count; count = 5; 而不是使用 RoundedDouble cou
编译 C 结构
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
r - 重叠嵌套列表并保留命名/结构
在创建嵌套列表时，我认为 R 具有对列表元素有用的命名结构。我有一个列表列表，并希望应用包含在任何列表中的每个向量的函数。 lapply这样做但随后剥离了列表的命名结构。我该怎么办 lapply嵌套列
个人管理器的 XML 结构
我正在做一个用于学习目的的个人组织者，我从来没有使用过 XML，所以我不确定我的解决方案是否是最好的。这是我附带的 XML 文件的基本结构:
couchdb - PouchDB 结构
我是新来的 nosql概念，所以当我开始学习时 PouchDB ，我找到了这个转换表。我的困惑是，如何PouchDB如果可以说我有多个表，是否意味着我需要创建多个数据库？因为根据我在 pouchdb

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 关于D3堆积条形图结构