Sriram Sriram - 7 months ago 32
Javascript Question

In multiline chart, at the end of each line i want a small circle and the value of the end point using 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>




This is my code but i want to draw a small circle at the end of each line along with the value of the end point.I dint add my data file here, and am new to d3.js so do suggest me with the ideas. Thank you

Please find the tsv dataset here

Answer

You can do it like this:

 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.      
      })

working code here