D3-Balkendiagramm mit AJAX-Daten

Question

Ich verwende das Beispieldiagramm von http://bl.ocks.org/mbostock/3885304 und anstatt das tsv-Beispiel zu verwenden, möchte ich Json von API-Aufruf verwenden.

Das Diagramm wird angezeigt, in dem Sinne, dass es einen großen Fleck von etwas gibt, was wie ein einzelner Balken aussieht.

Die JSON vom api.php Aufruf wie dieser

Kevin

Dank

Plunker

[{"id":"2","name":"wombat","total":"98000","record_date":"2016-01-21 00:00:00"},{"id":"5","name":"wombat","total":"96000","record_date":"2016-02-21 00:00:00"},{"id":"8","name":"wombat","total":"93000","record_date":"2016-03-21 00:00:00"},{"id":"11","name":"wombat","total":"91000","record_date":"2016-04-21 00:00:00"},{"id":"14","name":"wombat","total":"92000","record_date":"2016-05-21 00:00:00"},{"id":"17","name":"wombat","total":"83000","record_date":"2016-06-21 00:00:00"},{"id":"20","name":"wombat","total":"81000","record_date":"2016-07-21 00:00:00"}] 

schaut zurück

Answer 1

Ihre json Datenfeld hat die record_date Eigenschaft statt event_time. Aber Ihr Code bezieht sich auf event_time Eigentum. Versuchen Sie, sie durch die record_date zu ersetzen.

Ich konnte keine anderen Fehler in Ihrem Code finden. Hier

ist der Arbeitscodeschnipsel:

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

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

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

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

 
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 + ")"); 
 

 
var data = [{ 
 
    "id": "2", 
 
    "name": "wombat", 
 
    "total": "98000", 
 
    "record_date": "2016-01-21 00:00:00" 
 
}, { 
 
    "id": "5", 
 
    "name": "wombat", 
 
    "total": "96000", 
 
    "record_date": "2016-02-21 00:00:00" 
 
}, { 
 
    "id": "8", 
 
    "name": "wombat", 
 
    "total": "93000", 
 
    "record_date": "2016-03-21 00:00:00" 
 
}, { 
 
    "id": "11", 
 
    "name": "wombat", 
 
    "total": "91000", 
 
    "record_date": "2016-04-21 00:00:00" 
 
}, { 
 
    "id": "14", 
 
    "name": "wombat", 
 
    "total": "92000", 
 
    "record_date": "2016-05-21 00:00:00" 
 
}, { 
 
    "id": "17", 
 
    "name": "wombat", 
 
    "total": "83000", 
 
    "record_date": "2016-06-21 00:00:00" 
 
}, { 
 
    "id": "20", 
 
    "name": "wombat", 
 
    "total": "81000", 
 
    "record_date": "2016-07-21 00:00:00" 
 
}]; 
 

 
var k = []; 
 
data.forEach(function(d) { 
 
    d.record_date = d.record_date; 
 
    d.total = +d.total; 
 
    k.push(d.record_date) 
 
}); 
 

 
x.domain(data.map(function(d) { 
 
    return d.record_date; 
 
})); 
 
y.domain([0, d3.max(data, function(d) { 
 
    return d.total; 
 
})]); 
 

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

 
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("Count"); 
 

 
svg.selectAll(".bar") 
 
    .data(data) 
 
    .enter().append("rect") 
 
    .attr("class", "bar") 
 
    .attr("x", function(d) { 
 
    return x(d.record_date); 
 
    }) 
 
    .attr("width", x.rangeBand()) 
 
    .attr("y", function(d) { 
 
    return y(d.total); 
 
    }) 
 
    .attr("height", function(d) { 
 
    return height - y(d.total); 
 
    }); 
 

 

 
function type(d) { 
 
    d.total = +d.total; 
 
    return d; 
 
}

.bar { 
 
    fill: steelblue; 
 
} 
 
.bar:hover { 
 
    fill: brown; 
 
} 
 
.axis { 
 
    font: 10px sans-serif; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 
.x.axis path { 
 
    display: none; 
 
}

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