2016-07-03 11 views
-2

Ich habe versucht, d3-Diagramm zu erstellen, wo Zeile und Spalten kombiniert werden, aber alle meine Versuche waren nicht erfolgreich.Convert CSV-Daten in D3-Diagramm

Styles:

svg { 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.axis text{ 
    font: Times; 
    font-size: 12px; 
    font-weight: bold; 
} 

JavaScript:

var margin = {top: 20, right: 10, bottom: 100, left:50}, 
    width = 700 - margin.right - margin.left, 
    height = 500 - margin.top - margin.bottom; 

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


// define x and y scales 
var xScale = d3.scale.ordinal() 
    .rangeRoundBands([0,width], 0.93, 0.93); 

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

var formater = d3.format(""); 

// define x axis and y axis 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .tickFormat(formater); 


d3.csv("result.csv", function(error,data) { 
    if(error) console.log("Error: data not loaded!"); 


    data.forEach(function(d) { 
     d.day = d.day; 
     d.dayStr = d.dayStr; 
     d.Ratio = +d.Ratio; 
     console.log(d.dayStr); 
    }); 



    // Specify the domains of the x and y scales 
    xScale.domain(data.map(function(d) { return d.dayStr; })); 
    yScale.domain([0, 6]); 



    // Draw xAxis and position the label 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
     .selectAll("text") 
     .attr("dx", "-.8em") 
     .attr("dy", ".25em") 
     .attr("transform", "rotate(-60)") 
     .style("text-anchor", "end") 
     .attr("font-size", "10px"); 


    // Draw yAxis and postion the label 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("x", -height/8) 
     .attr("dy", "-3em") 
     .style("text-anchor", "middle") 
     .text("Risk Value (in %)"); 
}); 

Daten:

Day,DayStr,Ratio,Note 
2016-06-29T00:00:00+03:00,06-29-2016,1.3, 
2016-06-30T00:00:00+03:00,06-30-2016,1.4, 
2016-07-01T00:00:00+03:00,07-01-2016,1.2, 
2016-07-02T00:00:00+03:00,07-02-2016,1.7, 
2016-07-03T00:00:00+03:00,07-03-2016,1.9, 
2016-07-04T00:00:00+03:00,07-04-2016,2.2, 
2016-07-05T00:00:00+03:00,07-05-2016,2.5, 
2016-07-06T00:00:00+03:00,07-06-2016,2.5, 
2016-07-07T00:00:00+03:00,07-07-2016,2.4, 
2016-07-08T00:00:00+03:00,07-08-2016,2.7, 
2016-07-09T00:00:00+03:00,07-09-2016,3.1, 
2016-07-10T00:00:00+03:00,07-10-2016,3.5, 
2016-07-11T00:00:00+03:00,07-11-2016,3.7, 
2016-07-12T00:00:00+03:00,07-12-2016,4.5, 
2016-07-13T00:00:00+03:00,07-13-2016,4.4, 
2016-07-14T00:00:00+03:00,07-14-2016,5,Alert! 

Link zum vollständigen code.

Das Endergebnis sollte wie folgt sein:

enter image description here

Antwort

0

Ihr Code ist ein guter Ausgangspunkt, aber Sie haben keine der Spalten gezogen, Punkte oder Text. Hier ist eine Möglichkeit, es zu tun:

var colAndPointAndText = 
    svg.selectAll(".cPT") 
     .data(data) 
     .enter().append("g") 
     .attr("class", "cPT"); 

    colAndPointAndText.append("rect") 
    .attr("x", function(d) { 
     return xScale(d.dayStr); 
    }) 
    .attr("width", xScale.rangeBand()) 
    .attr("y", function(d) { 
     return yScale(d.Ratio); 
    }) 
    .attr("height", function(d) { 
     return height - yScale(d.Ratio); 
    }) 
    .style("fill", "black"); 

    colAndPointAndText.append("circle") 
    .attr("cx", function(d) { 
     return xScale(d.dayStr); 
    }) 
    .attr("cy", function(d) { 
     return yScale(d.Ratio); 
    }) 
    .attr("r", 5) 
    .style("fill", "none") 
    .style("stroke", "orange") 
    .style("stroke-width", "2px") 

    colAndPointAndText.append("text") 
    .attr("x", function(d) { 
     return xScale(d.dayStr); 
    }) 
    .attr("y", function(d) { 
     return yScale(d.Ratio); 
    }) 
    .text(function(d) { 
     return d.Note; 
    }) 
    .style("fill", "#d62728") 

    var line = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.dayStr); 
    }) 
    .y(function(d) { 
     return yScale(d.Ratio); 
    }); 

    svg.append("path") 
    .datum(data) 
    .attr("class", "line") 
    .attr("d", line) 
    .style("fill", "none") 
    .style("stroke", "steelblue") 
    .style("stroke-width", "2px"); 

Voll Code running here.