jquery - How to create only one li element per call to d3.append? -

i'm passing in name of checkbox option in jquery d3 in order render new tab li element same name.

but tried passing in option name eg, "option1" creates new tab each letter in string using .data(val) option.

so in example below val = "option1" , create tab this:

d3.select("ul#charttabs")                 .selectall("li")                 .data(val)                 .enter()                 .append('li')                 .insert("a", ":first-child")                 .attr("data-toggle", "tab")                 .attr("id", function(val, i){ var result = val + i; return result; })                 .text(function(d){ return d; }) 

question:

how can create 1 tab per call d3.append?

this current output when passing in val "option1". not expected creates new tab each letter. instead of single button value option1.

d3 coercing string array, use .data([val]), or skip data-binding since aren't using it:

d3.select("ul#charttabs")   .append('li')   .insert("a", ":first-child")   .attr("data-toggle", "tab")   .attr("id", val + "0")   .text(val); 

if want multiple li, don't call code iterative-ly, want data-binding.

d3.select("ul#charttabs")   .selectall("li")   .data(["option1", "option2", "option3"])   ...