d3 stack bar chart issue

Question

Я создаю сложную гистограмму, используя d3. График оси ares получает визуализированный, но не гистограмма, а консоль JS также не бросает никаких ошибок.

Вот код:

var margin = { 
 
    top: 20, 
 
    right: 30, 
 
    bottom: 30, 
 
    left: 40 
 
    }, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var data = [{ 
 
    data: [ 
 
    ["2016-01-20T10:36:00.000Z", 95.6981132075472], 
 
    ["2016-01-20T11:10:00.000Z", 95.8882352941176], 
 
    ["2016-01-20T11:44:00.000Z", 95.8470588235294], 
 
    ["2016-01-20T12:18:00.000Z", 95.7941176470588], 
 
    ["2016-01-20T12:52:00.000Z", 95.675], 
 
    ["2016-01-20T13:26:00.000Z", 95.7573529411765], 
 
    ["2016-01-20T14:00:00.000Z", 95.8294117647059], 
 
    ["2016-01-20T14:34:00.000Z", 95.7736842105263] 
 
    ], 
 
    label: "a" 
 
}, { 
 
    data: [ 
 
    ["2016-01-20T10:36:00.000Z", 3.18867924528302], 
 
    ["2016-01-20T11:10:00.000Z", 3.15441176470588], 
 
    ["2016-01-20T11:44:00.000Z", 3.15], 
 
    ["2016-01-20T12:18:00.000Z", 3.16323529411765], 
 
    ["2016-01-20T12:52:00.000Z", 3.13970588235294], 
 
    ["2016-01-20T13:26:00.000Z", 3.17794117647059], 
 
    ["2016-01-20T14:00:00.000Z", 3.16617647058824], 
 
    ["2016-01-20T14:34:00.000Z", 3.18888888888889] 
 
    ], 
 
    label: "b" 
 
}]; 
 

 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 
var x = d3.scale.ordinal() 
 
    .rangeRoundBands([0, width]); 
 

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

 
var z = d3.scale.category10(); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var stack = d3.layout.stack() 
 
    .values(function(d) { 
 
    return d.data; 
 
    }) 
 
    .x(function(d) { 
 
    return new Date(d[0]); 
 
    }) 
 
    .y(function(d) { 
 
    return d[1]; 
 
    }); 
 

 
var layers = stack(data); 
 

 
var ary = []; 
 
layers.forEach(function(d) { 
 
    ary.push(d.data); 
 
}); 
 

 
x.domain(d3.extent(d3.merge(ary), function(d) { 
 
    return new Date(d[0]); 
 
})); 
 

 
y.domain([0, d3.max(d3.merge(ary), function(d) { 
 
    return d.y0 + d.y; 
 
})]); 
 

 
var layer = svg.selectAll(".layer") 
 
    .data(layers) 
 
    .enter().append("g") 
 
    .attr("class", "layer") 
 
    .style("fill", function(d, i) { 
 
    return z(i); 
 
    }); 
 

 
layer.selectAll("rect") 
 
    .data(function(d) { 
 
    return d; 
 
    }) 
 
    .enter().append("rect") 
 
    .attr("x", function(d) { 
 
    return x(d.x); 
 
    }) 
 
    .attr("y", function(d) { 
 
    return y(d.y + d.y0); 
 
    }) 
 
    .attr("height", function(d) { 
 
    return y(d.y0) - y(d.y + d.y0); 
 
    }) 
 
    .attr("width", x.rangeBand() - 1); 
 

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

 
svg.append("g") 
 
    .attr("class", "axis y") 
 
    .call(yAxis);

body { 
 
    font: 10px sans-serif; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Пожалуйста, дайте мне знать, что я делаю неправильно в приведенном выше коде, публикуемую и помочь мне исправить этот код.

Answer 1

Я исправил проблемы с моей осью в приведенном выше коде. И может отображать панель стека из-за ошибки, отмеченной @adilapapaya.

var margin = { 
 
    top: 20, 
 
    right: 30, 
 
    bottom: 30, 
 
    left: 40 
 
    }, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var data = [{ 
 
    data: [ 
 
    ["2016-01-20T10:36:00.000Z", 95.6981132075472], 
 
    ["2016-01-20T11:10:00.000Z", 95.8882352941176], 
 
    ["2016-01-20T11:44:00.000Z", 95.8470588235294], 
 
    ["2016-01-20T12:18:00.000Z", 95.7941176470588], 
 
    ["2016-01-20T12:52:00.000Z", 95.675], 
 
    ["2016-01-20T13:26:00.000Z", 95.7573529411765], 
 
    ["2016-01-20T14:00:00.000Z", 95.8294117647059], 
 
    ["2016-01-20T14:34:00.000Z", 95.7736842105263] 
 
    ], 
 
    label: "a" 
 
}, { 
 
    data: [ 
 
    ["2016-01-20T10:36:00.000Z", 3.18867924528302], 
 
    ["2016-01-20T11:10:00.000Z", 3.15441176470588], 
 
    ["2016-01-20T11:44:00.000Z", 3.15], 
 
    ["2016-01-20T12:18:00.000Z", 3.16323529411765], 
 
    ["2016-01-20T12:52:00.000Z", 3.13970588235294], 
 
    ["2016-01-20T13:26:00.000Z", 3.17794117647059], 
 
    ["2016-01-20T14:00:00.000Z", 3.16617647058824], 
 
    ["2016-01-20T14:34:00.000Z", 3.18888888888889] 
 
    ], 
 
    label: "b" 
 
}]; 
 

 
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 
var x = d3.scale.ordinal() 
 
    .rangeRoundBands([0, width], 0.7); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var z = d3.scale.category10(); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x) 
 
    .orient("bottom").ticks(d3.time.hour, 1) 
 
    .tickSize(0).innerTickSize(-height).outerTickSize(0).tickFormat(d3.time.format("%H:%M")); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left"); 
 

 
var stack = d3.layout.stack() 
 
    .values(function(d) { 
 
    return d.data; 
 
    }) 
 
    .x(function(d) { 
 
    return parseDate(d[0]); 
 
    }) 
 
    .y(function(d) { 
 
    return d[1]; 
 
    }); 
 

 
var layers = stack(data); 
 

 
var ary = []; 
 
layers.forEach(function(d) { 
 
    ary.push(d.data); 
 
}); 
 

 
console.log("d = ", ary) 
 

 
x.domain(ary[0].map(function(d) { 
 
    return parseDate(d[0]); 
 
})); 
 

 
y.domain([0, d3.max(d3.merge(ary), function(d) { 
 
    return d.y0 + d.y; 
 
})]); 
 

 
var layer = svg.selectAll(".layer") 
 
    .data(layers) 
 
    .enter().append("g") 
 
    .attr("class", "layer") 
 
    .style("fill", function(d, i) { 
 
    return z(i); 
 
    }); 
 

 
layer.selectAll("rect") 
 
    .data(function(d) { 
 
    return d.data; 
 
    }) 
 
    .enter().append("rect") 
 
    .attr("x", function(d) { 
 
    return x(parseDate(d[0])); 
 
    }) 
 
    .attr("y", function(d) { 
 
    return y(d.y + d.y0); 
 
    }) 
 
    .attr("height", function(d) { 
 
    return y(d.y0) - y(d.y + d.y0); 
 
    }) 
 
    .attr("width", x.rangeBand() - 1); 
 

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

 
svg.append("g") 
 
    .attr("class", "axis y") 
 
    .call(yAxis);

body { 
 
    font: 10px sans-serif; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

вопрос в этом разделе:

layer.selectAll("rect") 
    .data(function(d) { 
    return d; 
    }) 
    .attr("x", function(d) { 
    console.log("d = ", d) // this doesn't get called since there is no data 
    return x(d.x); 
    }) 

d является объектом, но d3 хочет массив таким образом, это не хранящую данные, которые вы передать его.

Я думаю, что это то, что вы хотите (хотя выходной график выглядит так, что я не уверен на 100% ...). В любом случае, просто помните, что вы хотите вернуть an array в функцию data.

layer.selectAll("rect") 
     .data(function(d) { 
     return d.data; 
     })