CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
hackwithharsha
hackwithharsha

Reputation: 910

Adding Data Label and Marker to the Line chart using d3

I have tried various approaches adding the marker and label to the line chart.

I tried with enter() method to add circles to the linechart. what I am able to get is the beginning or first point at the group level as mentioned in the snapshot.

Here, is the jsfiddle which I have tried till now.

Please advice, If there is any further information required.

Following is the snippet which I have tried to create marker

g.append('circle')
                    .attr("class"   ,"circle")    
                    .attr('cx',function(d) { return xScale(d[0]) ; })
                    .attr('cy',function(d) { return xScale(d[1]) ; })
                    .attr('r',22);

Snapshot

Upvotes: 0

Views: 1987

Answers (2)

Marcelo
Marcelo

Reputation: 4282

I second @TomShanley answer but you should not be using the enter .data[[data]] as you are not using the data itself. You should instead just add svg elements using d3. Later on you can add the data as needed to create the circles.

You should also not have <svg> elements inside <g> or others <svg>

Here is the updated fiddle:https://jsfiddle.net/mghays6a/1/

Upvotes: 1

Tom Shanley
Tom Shanley

Reputation: 1787

The enter selection that you are using for the circles, is based off the append for the line that uses .data([data]). While this is OK for lines/paths (as you want one element), this won't work when you want separate elements per datum.

You should do a separate selectAll("circle").data(data).enter()...etc, where the data is not in the square brackets. This will give you separate elements for each circle.

Upvotes: 0

Related Questions