从JSON D3.JS分组的条形图 [英] Grouped Bar Chart From JSON D3.JS

查看：117
本文介绍了从JSON D3.JS分组的条形图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

得到的酒吧显示和图形看起来像预期，除了酒吧互相堆叠每个月，而不是分散在该地区。

Got the bars to show up and graph looks as expected, except the bars are stacking on each other for each month instead of spread out over the area. They just keep overwriting each other for each month.

我的D3.keys（数据）返回1,2,3,4,5而不是思想1-2015， 1-2016等。

My D3.keys(data) Returns 1,2,3,4,5 instead of the thought 1-2015,1-2016,etc.

再次，一切正常，只是酒吧都在月底开始。因此，每个月都会有一堆酒吧互相覆盖，而不是相互分组。

Again everything is working, just the bars are all starting in the corner of the month. So each month is getting a stack of bars overwriting each other instead of being grouped next to each other?

UPDATE

我的数据并不总是统一的，这证明是非常困难的。几个月的结果不会有，而不是有一个枫叶：0几个月Maple只是根本不在那里。所以使这个图表有任何颜色分组是超越我。

My data is not always uniformed, this is proving to make this very dificult. Some months a result wont be there, instead of having a "Maple: 0" some months Maple just simply wont be there. So making this chart have any sort of color grouping is beyond me.

使用我提供的数据，我想使一个分组的条形图，因此 http://bl.ocks.org/mbostock/3887051
用月份代替州和所有可能的材料，每月的酒吧里面的月份。图例需要颜色代码与酒吧相同的颜色，但是由于上面的问题，我没有看到这个数据可能。我需要做的是检查所有月份的所有可能的材料，然后插入一个0和那个材料，没有它的所有月份。

With the data i have provided i would like to make a grouped bar chart as so http://bl.ocks.org/mbostock/3887051 with the months in place of states and all possible materials for each month the bars inside the months. The legend would need to color code to the same colors as the bars, however due to the problem above i dont see that possible with this data. What i need to do is check for all possible materials over all months, then insert a 0 and that material to all months that dont have it. However how to do this with D3 is beyond me.

我真的希望D3的例子有更多的嵌套JSON例子，例子都运行在非常简单的CSV文件

I really wish the D3 examples would have more nested JSON examples, the examples are all run on very simple formated CSV files, these dont help with real world examples!

My Code (JSON BELOW)

c $ c> var margin = {top：20，right：20，bottom：30，left：40，}，
width = 960- margin.left- margin.right，
height = margin.top是什么意思

var x0 = d3.scale.ordinal（）
.rangeRoundBands（[0，width]，.1）;

var x1 = d3.scale.ordinal（）;

var y = d3.scale.linear（）
.range（[height，0]）;

var color = d3.scale.ordinal（）
.range（[＃98abc5，＃8a89a6，＃7b6888，＃6b486b，＃a05d56 ，＃d0743c，＃ff8c00]）;

var xAxis = d3.svg.axis（）
.scale（x0）
.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 = nestedData;

var months = d3.keys（data）;

x0.domain（data.map（function（d）{return d.key;}））;
x1.domain（months）.rangeRoundBands（[0，x0.rangeBand（）]）;
y.domain（[0，d3.max（data，function（d）{return d3.max（d.values，function（d）{return d.values;}）;}）]）;

svg.append（g）
.attr（class，x axis）
.attr（transform height +））
.call（xAxis）;

svg.append（g）
.attr（class，y axis）
.call（yAxis）
.append ）
.attr（transform，rotate（-90））
.attr（y，6）
.attr（dy，.71em）
.style（text-anchor，end）
.text（Boxes）;

var month = svg.selectAll（。month）
.data（data）
.enter（）。append（g）
.attr （class，g）
.attr（transform，function（d）{returntranslate（+ x0（d.key）+，0）;}）;

month.selectAll（rect）
.data（function（d）{return d.values;}）
.enter
.attr（width，x1.rangeBand（））
.attr（x，function（d）{return x1（d.key）;}）
.attr y，function（d）{return y（d.values）;}）
.attr（height，function（d）{return height - y（d.values）;}）
.style（fill，red）;

var margin = {top: 20, right: 20, bottom: 30, left: 40,}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x0 = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var x1 = d3.scale.ordinal(); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var xAxis = d3.svg.axis() .scale(x0) .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 = nestedData; var months = d3.keys(data); x0.domain(data.map(function(d) { return d.key; })); x1.domain(months).rangeRoundBands([0, x0.rangeBand()]); y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.values;}); })]); 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("Boxes"); var month = svg.selectAll(".month") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; }); month.selectAll("rect") .data(function(d) {return d.values; }) .enter().append("rect") .attr("width", x1.rangeBand()) .attr("x", function(d) { return x1(d.key); }) .attr("y", function(d) { return y(d.values); }) .attr("height", function(d) { return height - y(d.values); }) .style("fill", "red");

JSON数据

[
  {
    "key": "1-2015",
    "values": [
      {
        "key": "MDF",
        "values": 726
      },
      {
        "key": "MAPLE PAINT GRADE",
        "values": 1652
      },
      {
        "key": "ALDER",
        "values": 1922
      },
      {
        "key": "MAPLE",
        "values": 1206
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 324
      },
      {
        "key": "POPLAR-MDF",
        "values": 19
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 679
      },
      {
        "key": "OAK",
        "values": 12
      }
    ]
  },
  {
    "key": "4-2015",
    "values": [
      {
        "key": "MAPLE",
        "values": 1979
      },
      {
        "key": "MAPLE PAINT GRADE",
        "values": 1988
      },
      {
        "key": "ALDER",
        "values": 1746
      },
      {
        "key": "MDF",
        "values": 883
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 639
      },
      {
        "key": "OAK",
        "values": 89
      },
      {
        "key": "POPLAR-MDF",
        "values": 24
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 367
      },
      {
        "key": "HICKORY",
        "values": 1
      },
      {
        "key": "WALNUT",
        "values": 20
      },
      {
        "key": "CHERRY",
        "values": 0
      }
    ]
  },
  {
    "key": "2-2015",
    "values": [
      {
        "key": "MAPLE PAINT GRADE",
        "values": 1758
      },
      {
        "key": "ALDER",
        "values": 1551
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 339
      },
      {
        "key": "MDF",
        "values": 727
      },
      {
        "key": "MAPLE",
        "values": 1712
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 434
      },
      {
        "key": "POPLAR-MDF",
        "values": 16
      },
      {
        "key": "OAK",
        "values": 12
      }
    ]
  }
]


推荐答案

我认为你的问题在这里：

I think your problem is here:

.attr("widht", x1.rangeBand())

更正，我得到一个图表似乎工作。

这篇关于从JSON D3.JS分组的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆