Zeichnen Sie ein Diagramm mit D3.JS

Ich versuche, ein Diagramm mit D3.js zu plotten. file.json ist meine JSON-Datei. Datum und Uhrzeit sollten in der X-Achse und Verkäufe in der Y-Achse sein.Zeichnen Sie ein Diagramm mit D3.JS

Das ist meine JSON Struktur,

[ 

    { 

     Date : "2017-12-17 18:30:01", 
     Sales : "50" 

    }, 
    { Date : "2017-12-17 17:30:00", 
     Sales : "20" 

    }, 
    { 
     Date : "2017-12-17 16:30:00", 
     Sales : "10" 
    } 

]

ich ein Diagramm Datum vs Anzahl der Verkäufe zeichnen möchten. Das ist mein JS: -

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 2px; 
} 
</style> 
<body> 

<!-- load the d3.js library -->  
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script> 

d3.json("file.json", function(data) { 
    var canvas = d3.select("body").append("svg") 
     .attr("width", 500) 
     .attr("height", 500) 
     .attr("border", "black") 

    var group = canvas.append("g") 
     .attr("transform", "translate(100,10)") 

    var line = d3.line() 
     .x(function(d, i) { 
      return d.Date; 
     }) 
     .y(function(d, i) { 
      return d.Sales; 
     }); 

    group.selectAll("path") 
     .data(data).enter() 
     .append("path") 
     .attr("d", function(d){ return line(d) }) 
     .attr("fill", "none") 
     .attr("stroke", "green") 
     .attr("stroke-width", 3); 
}); 

</script>

Es zeigt Fehler: - Uncaught TypeError: Cannot read property 'line' of undefined. Ich änderte von d3.svg.line() zu d3.line(), aber es zeigt jetzt leere Seite. Hier

Quelle

2017-12-18 codeclue

Sie verwenden D3 v4. Also sollte es 'var line = d3.line()' sein. –

Jetzt zeigt es nichts. fill = None – codeclue

Und das ist, weil Sie keine Skalen haben, was ein anderes Problem ist. –

ist ein Beispiel dafür, was Sie wollen, könnten (entnommen aus: https://bl.ocks.org/mbostock/3883245)

var data = [ 
 
    { 
 
     Date : "2017-12-17 18:30:01", 
 
     Sales : "50" 
 

 
    }, 
 
    { Date : "2017-12-17 17:30:00", 
 
     Sales : "20" 
 

 
    }, 
 
    { 
 
     Date : "2017-12-17 16:30:00", 
 
     Sales : "10" 
 
    } 
 
].map(function(entry) { 
 
    return { 
 
    Date: d3.timeParse("%Y-%m-%d %H:%M:%S")(entry.Date), 
 
    Sales: +entry.Sales 
 
    } 
 
}); 
 

 
var svg = d3.select("svg"), 
 
    margin = {top: 20, right: 20, bottom: 30, left: 50}, 
 
    width = +svg.attr("width") - margin.left - margin.right, 
 
    height = +svg.attr("height") - margin.top - margin.bottom, 
 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var x = d3.scaleTime() 
 
    .rangeRound([0, width]); 
 

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

 
var line = d3.line() 
 
    .x(function(d) { return x(d.Date); }) 
 
    .y(function(d) { return y(d.Sales); }); 
 

 
x.domain(d3.extent(data, function(d) { return d.Date; })); 
 
y.domain(d3.extent(data, function(d) { return d.Sales; })); 
 

 
g.append("g") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)) 
 

 
g.append("g") 
 
    .call(d3.axisLeft(y)) 
 

 
g.append("path") 
 
    .datum(data) 
 
    .attr("fill", "none") 
 
    .attr("stroke", "steelblue") 
 
    .attr("stroke-linejoin", "round") 
 
    .attr("stroke-linecap", "round") 
 
    .attr("stroke-width", 1.5) 
 
    .attr("d", line);

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

 
<svg width="600" height="180"></svg>

Quelle

2017-12-18 22:45:46 Brian

Zeichnen Sie ein Diagramm mit D3.JS

Antwort

Verwandte Themen