1
Ich habe Daten zur Aktivitätsverfolgung, die ich mit einem Balkendiagramm zeichnen möchte. Warum werden in meinem Balkendiagramm die Berichte nicht dargestellt? Ich kann den Fehler nicht sehen, den ich gemacht habe. Ich denke, ich habe die Datenstruktur richtig, aber ich kann überhaupt nicht überprüfen. Die Daten werden mit dieser GitHub gist geliefert.Bargraph nicht rendern d3
<!DOCTYPE html>
<meta charset="utf-8">
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 70,
left: 40
},
width = 900 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var parseDate = d3.time.format("%H:%M:%S").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
//.tickFormat(d3.time.format("%H:%M:%S"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
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 + ")");
d3.json("data/testdata.json", function(data) {
x.domain(d3.extent(data.dataset, function(d) {
return parseDate(d.time);
}));
// x.domain(d3.map(data.dataset, function(d) {
// console.log(d.time);
// return parseDate(d.time)
// }));
// y.domain(d3.extent(data, function(d, i) {
// return d.dataset[i].steps;
// }));
y.domain([0, d3.max(data.dataset, function(d) {
return d.steps;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
// .text("Time")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Steps");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("class", "bar")
.attr("x", function(d, i) {
return x(parseDate(d.dataset[i].time));
})
.attr("y", function(d, i) {
return y(d.dataset[i].steps);
})
.attr("width", function(d) {
return width/d.dataset.length
})
.attr("height", function(d, i) {
return height - y(d.dataset[i].steps);
});
});
</script>Können Sie mir einen Tipp geben? Muss ich meinen JSON auf andere Weise nisten/strukturieren? Es muss basisch sein, aber irgendwie kann ich nicht die Balkendiagramme