Question

我有一个堆积的条形图，我已经被扯了几天。完整的图表如下：

var dataset = [
  [{
    "x": 1,
    "y": 5
  }, {
    "x": 2,
    "y": 4
  }, {
    "x": 3,
    "y": 2
  }, {
    "x": 4,
    "y": 7
  }, {
    "x": 5,
    "y": 23
  }],
  [{
    "x": 1,
    "y": 10
  }, {
    "x": 2,
    "y": 12
  }, {
    "x": 3,
    "y": 19
  }, {
    "x": 4,
    "y": 23
  }, {
    "x": 5,
    "y": 17
  }],
  [{
    "x": 1,
    "y": 22
  }, {
    "x": 2,
    "y": 28
  }, {
    "x": 3,
    "y": 32
  }, {
    "x": 4,
    "y": 35
  }, {
    "x": 5,
    "y": 43
  }]
];

var stack = d3.layout.stack();
stack(dataset);

var w = 400;
var h = 400;

var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset[0].length))
  .rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
  .domain([0,
    d3.max(dataset, function(d) {
      return d3.max(d, function(d) {
        return d.y0 + d.y;
      });
    })
  ])
  .range([0, h]);

//Easy colors accessible via a 10-step ordinal scale
var colors = d3.scale.category10();

//Create SVG element
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", w)
  .attr("height", h);


var groups = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g")
  .style("fill", function(d, i) {
    return colors(i);
  });

var rects = groups.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
   	console.log(d);
    return xScale(i);
  })
  .attr("y", function(d) {
    return h - (yScale(d.y0 + d.y));
  })
  .attr("height", function(d) {
    return yScale(d.y);
  })
  .attr("width", xScale.rangeBand());

.text {
  font: 10px arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<div id="chart">

</div>

我的数据按照系列组织成x和y值，这很有效：

var dataset = [
  [{ "x": 1, "y": 5 }, { "x": 2, "y": 4 }, { "x": 3, "y": 2 }, { "x": 4, "y": 7 }, { "x": 5, "y": 23 }], 
  [{ "x": 1, "y": 10 }, { "x": 2, "y": 12 }, { "x": 3, "y": 19 }, { "x": 4, "y": 23 }, { "x": 5, "y": 17 }], 
  [{ "x": 1, "y": 22 }, { "x": 2, "y": 28 }, { "x": 3, "y": 32 }, { "x": 4, "y": 35 }, { "x": 5, "y": 43 }] 
];

但我无法弄清楚如何将每个系列的名称合并到我的JSON中。这是有效的JSON，但我不知道如何从我的d3访问它：

var dataset = [
  {"name": "oranges", 
  "data" : [{ "x": 1, "y": 5 }, { "x": 2, "y": 4 }, { "x": 3, "y": 2 }, { "x": 4, "y": 7 }, { "x": 5, "y": 23 }]},
  {"name": "apples", 
  "data" :[{ "x": 1, "y": 10 }, { "x": 2, "y": 12 }, { "x": 3, "y": 19 }, { "x": 4, "y": 23 }, { "x": 5, "y": 17 }]},
  {"name": "grapes", 
  "data" :[{ "x": 1, "y": 22 }, { "x": 2, "y": 28 }, { "x": 3, "y": 32 }, { "x": 4, "y": 35 }, { "x": 5, "y": 43 }]}
];

当我用

调用数据时

var stack = d3.layout.stack();
stack(dataset);

如何仅提取d3.layout.stack()所期望的数据但保留附加的系列名称？

Answer 1

而不是

stack(dataset);

这样做

stack(dataset.map(function(d){ return d.data;}));//since your json structure is like that

像这样设置域名

var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset[0].data.length))
  .rangeRoundBands([0, w], 0.05);

下一步制作矩形

var rects = groups.selectAll("rect")
  .data(function(d) {
    return d.data; //set the data to return data as your json data structure is like that.
  }) //rest code as the way you doing

工作代码here

如何在d3图表中命名系列？

1 个答案: