0

If I use the following code, I can make my circles appear on the graph:

var circles =

                  groups.selectAll("circle")
                   .data(data)
                   .enter().append("circle")
                   .attr("class", "circles")
                    .attr({
                         cx: function(d) { return x(+d.x_axis_Value); },
                         cy: function(d) { return y(+d.y_axis_value); },
                         r: function(d) { return d.priority * 10; },
                         id: function(d) { return d.project; }
                         })
                   .style("fill", function(d) { return color(d.status); })

If I instead use the following code, I can get my labels to appear where the circles were:

var circles =

                  groups.selectAll("circle")
                   .data(data)
                   .enter().append("text")
                   .attr("class", "text")
                   .attr("y", function (d) { return y(d.y_axis_value); })
                   .attr("x", function (d) { return x(d.x_axis_value); })
                   .text(function(d) { return d.project; })
                   .attr("fill", "white");

But I can't get both the circles and the labels to appear together.

I tried: 

groups.selectAll("circle")
                   .data(data)
                   .enter().append("circle")
                   .attr("class", "circles")
                    .attr({
                         cx: function(d) { return x(+d.x_axis_value); },
                         cy: function(d) { return y(+d.y_axis_value); },
                         r: function(d) { return d.priority * 10; },
                         id: function(d) { return d.project; }
                         })
                   .style("fill", function(d) { return color(d.status); })
                   .enter().append("text")
                   .attr("class", "text")
                   .attr("y", function (d) { return y(d.y_axis_value); })
                   .attr("x", function (d) { return x(d.x_axis_value); })
                   .text(function(d) { return d.project; })
                   .attr("fill", "white");

But this does not work.

Cybernetic
  • 12,628
  • 16
  • 93
  • 132
  • 2
    you don't have to use .enter() twice, .enter is for rendering data. D3 is kinda like Jquery in that every time you do an action you get an array back of elements that were changed https://github.com/mbostock/d3/wiki/Selections#enter – Daemedeor May 19 '15 at 02:10
  • So I removed the 2nd enter(), but only the circles appear. – Cybernetic May 19 '15 at 02:16
  • 1
    its because you probably can't append text to a cicle (sorry a bit rusty on d3, which is why i'm using comments since i'm not doing the work fully) so it might be that you append a grouping and then append the circles and text to the grouping as demonstrated (well its demonstrated with rect but i can't imagine it being too different): http://stackoverflow.com/questions/20644415/d3-appending-text-to-a-svg-rectangle – Daemedeor May 19 '15 at 02:21

1 Answers1

0

Sorry, might be a little rusty but I think this is the correct syntax. For future reference, it'll help to maybe make a jsfidde/plnkr, etc. 

var circles = groups.selectAll("circle")
                   .data(data)
                   .enter().append(g);

circles.append("circle")
                   .attr("class", "circles")
                    .attr({
                         cx: function(d) { return x(+d.x_axis_value); },
                         cy: function(d) { return y(+d.y_axis_value); },
                         r: function(d) { return d.priority * 10; },
                         id: function(d) { return d.project; }
                         })
                   .style("fill", function(d) { return color(d.status); });

circles.append("text")
                   .attr("class", "text")
                   .attr("y", function (d) { return y(d.y_axis_value); })
                   .attr("x", function (d) { return x(d.x_axis_value); })
                   .text(function(d) { return d.project; })
                   .attr("fill", "white");
Daemedeor
  • 1,013
  • 10
  • 22
  • Thank you for your answer. However nothing appeared when I tried this. Your previous comment made me think of another angle and so I tried this: groups.selectAll("groups") on the second "var circles" block and it worked. So thank you :) – Cybernetic May 19 '15 at 02:54
  • yeah, sorry, i haven't worked with D3 in a while. :P glad you found the solution. GL – Daemedeor May 19 '15 at 02:56