d3js堆积条形图变量键答案

【问题标题】：d3js stacked bar chart variable keysd3js堆积条形图变量键
【发布时间】：2018-11-13 22:13:40
【问题描述】：

我正在使用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))

【问题讨论】：

我看到 2 轴带有刻度和错误。所以我建议你再运行一次。仔细阅读每一行，想想是否正确，很多行都有错误
这个问题还有效吗？链接的示例似乎工作正常......
示例是有效的，因为我的数据看起来不同，而且我的代码更改不起作用。我认为它无法将密钥与数据联系起来
@rioV8 我真的在控制台没有任何错误。而且我可以看到 .data(stack.keys(function(d) {return d.keys; })(data)) 没有返回任何内容，因为其余代码没有运行。

标签： d3.js bar-chart stacked

【解决方案1】：

在数据中，我放了所有的键，但我将它们归零（而不是根本没有键）

【讨论】：