In mehrzeiligen Diagramm, am Ende jeder Zeile möchte ich einen kleinen Kreis und den Wert des Endpunkts mit d3.js

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> /* set the CSS */ 
 

 
body { font: 12px Arial;} 
 

 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: green; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
} 
 

 

 
</style> 
 
<body> 
 

 
<script src="d3.min.js"></script> 
 
<script> 
 

 
// Set the dimensions of the canvas/graph 
 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
 
    width = 600 - margin.left - margin.right, 
 
    height = 270 - margin.top - margin.bottom; 
 

 
var parseDate = d3.time.format("%Y-%m-%d").parse; 
 
//2015-06-20 
 
// Set the ranges 
 
var x = d3.time.scale().range([0, width]); 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
// Define the axes 
 
var xAxis = d3.svg.axis().scale(x) 
 
    .orient("bottom").ticks(10); 
 

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

 
// Define the line 
 
var priceline = d3.svg.line().interpolate("basis") 
 
    .x(function(d) { console.log(d.T1); return x(d.T1); }) 
 
    .y(function(d) { return y(d.NATURE_QUERY); }); 
 
    
 
// Adds the svg canvas 
 
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 + ")"); 
 

 
// Get the data 
 
d3.csv("datatest.csv", function(error, data) { 
 
    data.forEach(function(d) { 
 
     console.log(d.T1); 
 
     d.T1 = parseDate(d.T1); 
 
    }); 
 
    // Scale the range of the data 
 
    x.domain(d3.extent(data, function(d) { return d.T1; })); 
 
    y.domain([0, d3.max(data, function(d) { return d.NATURE_QUERY; })]); 
 

 
    // Nest the entries by symbol 
 
    var dataNest = d3.nest() 
 
     .key(function(d) {return d.CLOSING_DEPT;}) 
 
     .entries(data); 
 
    console.log(dataNest); 
 

 
    // Loop through each symbol/key 
 
    dataNest.forEach(function(d) { 
 
     svg.append("path") 
 
      .attr("class", "line") 
 
      .attr("d", priceline(d.values)); 
 

 
    }); 
 

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

 
    // Add the Y Axis 
 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis); 
 

 
}); 
 

 
</script> 
 
</body>

Dies ist mein Code, aber ich möchte einen kleinen Kreis am Ende ziehen von jeder Linie zusammen mit dem Wert des Endpunktes. Ich dint addiere meine Datendatei hier, und bin zu d3.js neu, also schlägt mich mit den Ideen vor. Danke

finden Sie bitte das tsv-Datensatz here

Quelle

2016-05-09 Sriram

Wie die CSV-Datei hier hinzufügen? – Sriram

Fügen Sie über gist https://gist.github.com/ hinzu und teilen Sie die URL in der Frage mit. – Cyril

Es zeigt einen Fehler ya, also können Sie bitte teilen Sie Ihre E-Mail-ID, so dass ich die Daten senden kann .. – Sriram

Sie können es wie folgt tun:

dataNest.forEach(function(d){ 
     //iterate over all the data for line to get the last point of a line. 
     var k = d.values 
     var last = k[k.length -1];//get the last value of the line 
     svg.append("circle") 
     .attr("cx", function(d){return x(last.T1);})//make a circle at the last point 
     .attr("cy", function(d){return y(last.NATURE_QUERY);}) 
     .attr("r", 4); 
     //make a text 
     svg.append("text") 
     .attr("x", function(){return x(last.T1) + 20;}) 
     .attr("y", function(){return y(last.NATURE_QUERY);}) 
     .text(function(){return last.CLOSING_DEPT;}) //set the text you want to display.  
     })

Arbeits Code here

Quelle

2016-05-09 09:51:46 Cyril

Dude das funktioniert gut, vielen Dank ... Und noch eine Sache, die ich nicht auf der Y-Achse Linie will, stattdessen möchte ich eine y-Achse Gitter – Sriram

können Sie es so tun http://plnkr.co/edit/gfVuzP2nZXV1XcBebJqE?p=preview – Cyril

Danke Cyril, das funktioniert:) – Sriram

In mehrzeiligen Diagramm, am Ende jeder Zeile möchte ich einen kleinen Kreis und den Wert des Endpunkts mit d3.js

Antwort

Verwandte Themen