Drawing сложенной гистограмма с помощью d3

Question

Я пытаюсь адаптировать этот код:

http://bl.ocks.org/anupsavvy/9513382

для построения сложенной гистограммы с помощью пользовательских данных. Мне не нужны переходы, просто простой сюжет.

Я заканчиваю с этим кодом:

data = jsonArr; 

var margin = { 
    top: 40, 
    right: 40, 
    bottom: 40, 
    left: 40 
    }, 
    width = 600 - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom; 

var color = d3.scale.ordinal() 
    .range(colorrange); 

var stack = d3.layout.stack(); 

stack(data); 

var xScale = d3.time.scale() 
    .domain([new Date(0, 0, 0, data[0][0].label, 0, 0, 0), new Date(0, 0, 0, data[0][data[0].length - 1].label, 0, 0, 0)]) 
    .rangeRound([0, width - margin.left - margin.right]); 


var yScale = d3.scale.linear() 
    .domain([0, 
    d3.max(data, function(d) { 
     return d3.max(d, function(d) { 
     return d.y0 + d.value; 
     }); 
    }) 
    ]) 
    .range([height - margin.bottom - margin.top, 0]); 

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .ticks(d3.time.hour, 1) 
    .tickFormat(d3.time.format("%H")); 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .ticks(10); 

var svg = d3.select("#info") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var groups = svg.selectAll("g") 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("class", "rgroups") 
    .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")") 
    .style("fill", function(d, i) { 
    return colorrange[i]; 
    }); 

var rects = groups.selectAll("rect") 
    .data(function(d) { 
    return d; 
    }) 
    .enter() 
    .append("rect") 
    .attr("width", 6) 
    .attr("height", function(d) { 
    return -yScale(d.value) + (height - margin.top - margin.bottom); 
    }) 
    .attr("x", function(d) { 
    return xScale(new Date(0, 0, 0, d.label, 0, 0, 0));; 
    }) 
    .attr("y", function(d) { 
    return -(-yScale(d.y0) - yScale(d.value) + (height - margin.top - margin.bottom) * 2); 
    }); 

console.log(rects); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(40," + (height - margin.bottom) + ")") 
    .call(xAxis); 


svg.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .call(yAxis); 

svg.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 0 - 5) 
    .attr("x", 0 - (height/2)) 
    .attr("dy", "1em") 
    .text("Number of complaints"); 

svg.append("text") 
    .attr("class", "xtext") 
    .attr("x", width/2 - margin.left) 
    .attr("y", height - 5) 
    .attr("text-anchor", "middle") 
    .text("Hour of day"); 

Более конкретно:

yScale(d.y0) возвращается NaN.

Если я комментирую этот кусок кода, я могу видеть оси:

Через некоторое время мне удалось увидеть и некоторые данные (среди ошибок):

Я думаю, Я не понимаю правильного способа построения самих данных. Любая помощь будет оценена по достоинству.

Мой jsonlabel атрибут связан с y координат, в то время как value связано с x координат.

EDIT:

кажется, что проблема начинается тогда, когда я называю stack. Первый массив имеет значения y0 как 0, но второй и третий имеют y0 = NaN. Я не знаю, как это исправить.

Это относительное jsfiddle:

https://jsfiddle.net/rhzkz9gb/13/

Answer 1

Вы должны предоставить функции доступа для данных (потому что не с ключом «х» и «у»).

var stack = d3.layout.stack().x(function(d,i){return i;}).y(function(d){return d.value;}); 

https://jsfiddle.net/ermineia/rhzkz9gb/14/