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

斯里尼瓦斯·加迪利

我试图显示different countries and its citywise population使用,stacked bar chart但数据集unique与城市和国家/地区互为唯一,我的图表仅根据代码显示该集中的第一个数据。但是如何使它起作用,以便它可以显示每个国家的所有数据,并以不同的堆叠条形显示。这是到目前为止我尝试过的代码:https : //jsbin.com/qopazukahi/edit?html,output

以下是我的数据集:

var data=[
  {
    "Country": "India",
    "Delhi": 310504,
    "Kolkata": 552339,
    "Chennai": 259034,
  },
  {
    "Country": "Australia",
    "Melbourne": 62083,
    "Sydney": 85640,
    "Perth": 42153,
    "Canberra": 74257,
    },
  {
    "Country": "USA",
    "New York": 415910,
    "Miami": 828669,
    "Frankfort": 362642,
    "Portland": 601943,
    "Topeka": 1804762,
  },

];

这是我完整的代码:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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(".2s"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data=[
  {
    "Country": "India",
    "Delhi": 310504,
    "Kolkata": 552339,
    "Chennai": 259034,
  },
  {
    "Country": "Australia",
    "Melbourne": 62083,
    "Sydney": 85640,
    "Perth": 42153,
    "Canberra": 74257,
    },
  {
    "Country": "USA",
    "New York": 415910,
    "Miami": 828669,
    "Frankfort": 362642,
    "Portland": 601943,
    "Topeka": 1804762,
  },

];

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

  data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.ages[d.ages.length - 1].y1;
  });

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

  x.domain(data.map(function(d) { return d.Country; }));
  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)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Population");

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

  Country.selectAll("rect")
      .data(function(d) { return d.ages; })
    .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.name); });

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

</script>
斯里尼瓦斯·加迪利

需要考虑data []数据数组中存在的所有索引,如下所示:

data.forEach(function(d,i) {
            var y0 = 0;
            d.ages = d3.keys(data[i]).filter(function(key) { return  !key.match(/Country/); }).map(function(name) {
                 return {name: name, y0: y0, y1: y0 += +d[name]}; 
            });

这是workig bin:https ://jsbin.com/qopazukahi/edit ? html,输出

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

R中小数据集的堆积条形图

来自分类Dev

按条形图的唯一因子堆积的条形图顺序

来自分类Dev

创建堆积的条形图,以每月间隔显示数据吗?

来自分类Dev

如何水平显示堆积的条形图?

来自分类Dev

数据框水平堆积条形图

来自分类Dev

堆积条形图

来自分类Dev

堆积条形图

来自分类Dev

堆积条形图

来自分类Dev

一栏堆积条形图

来自分类Dev

由于输入数据帧错误,条形图不显示

来自分类Dev

简单条形图不显示图

来自分类Dev

使用相同的数据集创建Plottable.js堆积的条形图

来自分类Dev

点网图堆积的条形图显示类似于常规条形图

来自分类Dev

突出显示ggplot2中堆积的条形图的一部分

来自分类Dev

Matplotlib:堆积的条形图

来自分类Dev

排序堆积的条形图

来自分类Dev

ChartJs堆积条形图

来自分类Dev

R堆积条形图

来自分类Dev

ggplot的堆积条形图

来自分类Dev

堆积条形图反转

来自分类Dev

簇堆积条形图

来自分类Dev

熊猫堆积的条形图

来自分类Dev

jqPlot堆积条形图显示为图表外

来自分类Dev

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

来自分类Dev

仅2点的条形图(chart.js)不显示条形之一

来自分类Dev

用熊猫分组数据堆积条形图

来自分类Dev

Python中大数据的堆积条形图

来自分类Dev

使用散点图数据对齐堆积的条形图

来自分类Dev

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