Блог

Я новичок в JS. Я пытаюсь создать столбчатую диаграмму с накоплением. Я следовал этому примеру — Создаю столбчатый график. Когда я пытаюсь импортировать данные с сервера, прямоугольники (или сложенные графики) не отображаются. На диаграмме должно было быть 130 столбцов. Видны только метки по оси x. Вот файл .js —

 queue()
.defer(d3.json, "/data2")
.await(makeCharts);

function makeCharts(error, recordsJson) {

var data = recordsJson;
var dateForm = d3.time.format("%Y-%m-%d %H:%M:%S");

data.forEach(function(d) {
    d["timestamp"] = dateForm.parse(d["timestamp"]);
    d["timestamp"].setHours(0,0,0);
});

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {return d["timestamp"];});


var YDimension = XDimension.group().reduce(
function reduceAdd(p, d) {
  p[d["running_slot"]] = (p[d["running_slot"]]|| 0)   1;
  return p;
},
function reduceRemove(p, d) {
  p[d["running_slot"]] = (p[d["running_slot"]]|| 0)-1;
  return p;
},
function reduceInitial() {
  return {};})


dc.barChart("#Chart")
.width(30080).height(400)
.dimension(XDimension)
.group(YDimension,"6-10",function(d) {return d.value["6-10"];})
.stack(YDimension,"10-14",function(d) {return d.value["10-14"];})
.stack(YDimension,"14-18",function(d) {return d.value["14-18"];})
.stack(YDimension,"18-22",function(d) {return d.value["18-22"];})
.stack(YDimension,"22-2",function(d) {return d.value["22-2"];})
.stack(YDimension,"2-6",function(d) {return d.value["2-6"];})    
.transitionDuration(1500)
.xUnits(dc.units.ordinal)
.x(d3.scale.ordinal().domain(XDimension)) 
.renderlet(function (chart) {

//Check if labels exist
var gLabels = chart.select(".labels");
if (gLabels.empty()){
    gLabels = chart.select(".chart-body").append('g').classed('labels', true);
}

var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]);

gLabelsData.exit().remove(); //Remove unused elements

gLabelsData.enter().append("text") //Add new elements

gLabelsData
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.text(function(d){
    text_object =  d3.select(d).data()[0].data.value
    console.log(text_object)
    return text_object
})
.attr('x', function(d){ 
    return  d.getAttribute('x')   (d.getAttribute('width')/2); 
})
.attr('y', function(d){ return  d.getAttribute('y')   15; })


})


dc.renderAll();

};
  

Вот как выглядит примерная дата —

 [{"running_slot":"10-14","timestamp":"2016-07-29 07:01:37"}, 
{"running_slot":"10-14","timestamp":"2016-07-31 07:56:05"}, 
{"running_slot":"10-14","timestamp":"2016-08-01 01:44:41"},
{"running_slot":"10-14","timestamp":"2016-07-28 05:45:51"}, 
{"running_slot":"10-14","timestamp":"2016-08-02 06:22:10"},
{"running_slot":"10-14","timestamp":"2016-07-28 05:05:10"},
{"running_slot":"10-14","timestamp":"2016-08-05 06:39:19"},
{"running_slot":"2-6","timestamp":"2016-06-04 03:44:40"},
{"running_slot":"10-14","timestamp":"2016-06-04 03:48:29"},
{"running_slot":"2-6","timestamp":"2016-06-04 03:48:54"},
{"running_slot":"2-6","timestamp":"2016-06-04 03:50:09"},
{"running_slot":"6-10","timestamp":"2016-06-04 06:14:34"}];