Переменные гистограммы с накоплением d3js - PullRequest
Новая
       82

Переменные гистограммы с накоплением d3js

0 голосов
/ 14 ноября 2018

Я использую этот пример гистограммы с накоплением Но в своих данных я никогда не знаю ключей. Поэтому я получаю их как часть данных 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

EDIT: Если я помещу массив со значениями здесь, он как-то работает, но мне нужно изменить ключи в соответствии с данными 

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