Question

我正在使用this example of stacked bar chart，但是在我的数据中，我永远都不知道键。所以我把它们作为json数据的一部分。

数据：

{"apple":6522,"cherry":4611,"orange":2004,"time":1539792000000,"keys": 
 ["apple","cherry","orange",],"max":6522}, 
 {"apple":6171,"melone":4348,"time":1539802800000,"keys":["apple", 
 "melone],"max":6171}...

我正在使用函数返回键列表。这是我的代码：

var xScale = d3.scaleBand().range([0, width]).padding(0.1);
var yScale = d3.scaleLinear().range([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory20); 
var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b"));
var yAxis =  d3.axisLeft(yScale);
var stack = d3.stack();

var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.25)    
    .align(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal().range(['#d53e4f','#fc8d59','#fee08b']);


  x.domain(data.map(function(d) { return d.time; }));
  y.domain([0, d3.max(data, function(d) { return d.max;})]);
  z.domain(data.map(function(d) { return d.keys; }));

  g.selectAll(".serie")
    .data(stack.keys(function(d) { return d.keys; })(data))
    .enter().append("g")
      .attr("class", "serie")
      .attr("fill", function(d) { return z(d.value); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
      .attr("x", function(d) { return x(d.data.time); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width", x.bandwidth());

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y(y.ticks(10).pop()))
      .attr("dy", "0.35em")
      .attr("text-anchor", "start")
      .attr("fill", "#000");

在页面：D

中没有显示任何错误或任何内容

编辑：如果我在此处放置一个带有值的数组，它可以以某种方式工作，但是我需要根据数据更改键

   .data(stack.keys(["apple","orange"])(data))

d3js堆叠的条形图变量键

0 个答案: