Clever Geek Handbook

How to close and just add HTML element in D3.JS?

Now I have the following code:

d3.select("#commiterStatsContainer")
        .append("div").attr("class", "chip")
        .append("img").attr("src", committers[i].avatar)
        .text(committers[i].login);

but it adds my text inside the tag <img>...</img>

. How to close <img>

and add some text later?

+3


source to share


1 answer


The append method returns a new selection containing the added items ( See documentation ). So follow your code:

d3.select("#commiterStatsContainer") // initial selection
  .append("div").attr("class", "chip") // new selection with a div
  .append("img").attr("src", committers[i].avatar) // new selection of img in that div
  .text(committers[i].login); // text for the img tag in the div.

Try this instead:



var div = d3.select("#commiterStatsContainer")
  .append("div").attr("...");

div.append("img").attr("....");
div.append("p").html("....");

The variable div

is the selection of the newly created div, then you can use div.append()

to add new elements to that div.

+2


source






More articles:


All Articles