Add data points and text to lines on a multi-bar graph with lines

I used the d3 pre-built chart found here:

https://bl.ocks.org/nanu146/f48ffc5ec10270f55c9e1fb3da8b38f0

It works great and everything is pulling the way it is supposed to. However, it's been requested that the lines have data points added with the text of the value for each point above it.

I have placed some code for text here:

svg.selectAll(".lines")
.classed('labels-group', true)
.data(lineData)
.enter()
.append("g")
.attr("class", "line")
.each(function (d)
Name = d[0].name
d3.select(this)
.append("path")
.attr("d", function (b) return line(b) )
.style( "stroke-width": "3px", "fill": "none" )
.style("stroke", LineColor(Name))
.transition()
.duration(1500)
.append('text')
.classed('label', true)
.attr(
'x': function(d, i)
return x(d.name);
,
'y': function(d, i)
return y(d.value);

)
.text(function(d, i)
return d.value;
);

)


That makes one line disappear, however. Am I placing this in the wrong spot or am I missing something to tell the code to finish with the line and continue?

1 Answer
1

Firstly, a minor and quick glitch in the line coloring is due to this Name = d[0].name where d has no attribute as name but does have one as Name (capital N)

Name = d[0].name

d

Name = d[0].Name;


Now, the main issue with your code is that you're trying to append text to the path which would never work. The way you should do is:

text

path

var lines = d3.select(this)
.append("path")
.attr("d", function (b) return line(b) )
.style( "stroke-width": "3px", "fill": "none" )
.style("stroke", LineColor(Name))
.transition().duration(1500);

var texts = d3.select(this).selectAll('text.value')
.....


Using the logic in #2, append the texts for each element in d and assign x, y and text accordingly. Here's how:

d

x

y

text

var texts = d3.select(this).selectAll('text.value')
.data(d)
.enter().append('text')
.classed('label', true)
.attr('dy', '-1em')
.text(function (d)
return d.Value;
)
.attr(
'x': function(d, i)
var width = d3.select(this).node().getBBox().width;
return x0(d.Date) + x0.rangeBand() / 2 - width/2;
,
'y': function(d, i)
return YLine(d.Value);

);


If you notice the above code, I'm assigning the text first and then applying x based on the width of the text using getBBox to center the text at the point. Feel free to adjust dy, dx according to your requirements.

text

x

dy

dx

Putting together all of the above, here's a fork of that code:

https://bl.ocks.org/shashank2104/2acfdd38dc262285d2c736ba86dbc1ad/11380be2e4c095808231056930d6860f97722254

Hope this helps. And if you're up for suggestions, please refer this for adding data-points to a line chart.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.