d3 lines and circles data

Question

I am trying to draw a set of lines and circle points, but I cant figure out how to get the circles to work.

The line function needs an array of points, but for the circle it needs just the x/y of each point.

How do I append a circle (to the same group as the line), for each x/y point?

// Data join
var join = svg.selectAll("g")
    .data(lineData)

// Enter
var group = join.enter()
    .append("g");

group.append("path")
    .attr('stroke', 'blue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');

group.append('circle')
    .attr("r", 10)
    .attr('fill', 'blue');

// Update
join.select("path")
    .attr('d', line);

join.select("circle")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); });

Full code is here: http://jsfiddle.net/dxxddvL4/1/

[This question](http://stackoverflow.com/questions/18693005/create-points-on-a-d3-multiline-graph) should help. — Lars Kotthoff, Feb 19 '15 at 21:14

score 4 · Accepted Answer · answered Feb 19 '15 at 22:24

The basic pattern you need to use are nested selections -- for each line, there are multiple circles. It's easier to do the lines and circles separately, lines and g elements first:

var join = svg.selectAll("g")
        .data(lineData);

    // Enter
    join.enter()
        .append("g")
        .append("path")
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');

    // Update
    join.select("path")
        .attr('d', line);

    join.exit().remove();

The code is basically the same as yours, except that the appended g elements aren't saved in a separate selection and the exit selection is handled by removing the elements. Now the circles, along the same lines:

var circles = join.selectAll("circle")
        .data(function(d) { return d; });

    circles.enter()
        .append('circle')
        .attr("r", 10)
        .attr('fill', 'blue');

    circles.attr("cx", function(d) { return x(d.x); })
        .attr("cy", function(d) { return y(d.y); });

    circles.exit().remove();

The first line here is the nested selection -- for each element in the array that denotes the line, we want a circle. Note that this is operating on the update selection of the g elements. This is ok because the elements in the enter selection are merged into the update selection when the g elements are appended. That is, even though we only handle the update selection, any newly-appended elements are included in this.

After that, we handle the selections as usual. The enter selection has elements appended, the update selection sets the coordinates, the exit selection removes elements. All the magic happens in that first line, where we tell D3 to, for each g element at the top level, bind each point from the line to any circles underneath.

Complete example here.

d3 lines and circles data

1 Answers1