CODEWITHSUNDEEP
javascriptd3.jssvg
smcs
smcs

Reputation: 2004

d3: Existing elements are invisible

In this fiddle, I'm trying to append more than one SVG element per data point to the canvas like this:

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   ....
   .append("line")

The lines show up in the Firefox inspector, but aren't displayed in the visualization. Why is that?

Upvotes: 0

Views: 374

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You are nesting the elements in each other -- you can't do this in SVG. You can only nest elements inside g elements, i.e.

g
|- circle
|- line

You can create this structure by appending g elements for the enter selection and keeping a reference to them:

var newGs = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g");
newGs.append("circle")
  ...
newGs.append("line")
  ....

Complete demo here.

Upvotes: 2

Related Questions