CODEWITHSUNDEEP
d3.jssvgtextappendgeometry
Michael
Michael

Reputation: 7113

How to add two elements (circle and text) to SVG g element with D3js?

I like to add a circle and a text element to a SVG chart. With following code only the circle is added.

// Draw chart
let entry = d3.select( ".chart" ).selectAll("g")
    .data(data)
    .enter().append("g")
      .attr("transform", (date, i) => "translate("+ (width - x(date.Seconds - data[0].Seconds)) +", "+ (padding+i*y) + ")")
      .classed("doping", (d) => d.Doping !== "" );

entry.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", y*0.4)
      .attr("name ", (d) => d.Name )
      .attr("country", (d) => d.Nationality )
      .attr("year", (d) => d.Year )
      .attr("time", (d) => d.Time )
      .attr("allegation", (d) => d.Doping );

entry.append("text")
      .text((d) => d.Name)
      .attr("x", y*2)
      .attr("y", 0)
      .classed("text", true);

I can append only the text element, if I omit the circle. But not both.

The codepen: http://codepen.io/lafisrap/pen/zwwqzw

How can I do that?

Upvotes: 0

Views: 1145

Answers (1)

bumbeishvili
bumbeishvili

Reputation: 1460

It's because you are trying to set non existent attributes to the circle.

Remove these lines and it will work

  .attr("name ", (d) => d.Name )
  .attr("country", (d) => d.Nationality )
  .attr("year", (d) => d.Year )
  .attr("time", (d) => d.Time )

codepen

Upvotes: 1

Related Questions