Brian J Brian J - 2 months ago 6
jQuery Question

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

I'm passing in the name of a checkbox option in JQuery d3 in order to render a new tab

element with the same name.

But what I tried passing in the option name eg, "option1" creates a new tab for each letter in the string using the

So in my example below
val = "option1"
and I create the tab like this:"ul#chartTabs")
.insert("a", ":first-child")
.attr("data-toggle", "tab")
.attr("id", function(val, i){ var result = val + i; return result; })
.text(function(d){ return d; })


How can I create only one tab per call to d3.append?

This is the current output when passing in the val
. Which is not as expected as it creates a new tab for each letter. Instead of a single button with value option1.

enter image description here


d3 is coercing your string to an array, you could just use .data([val]), or skip the data-binding all together since you aren't really using it:"ul#chartTabs")
  .insert("a", ":first-child")
  .attr("data-toggle", "tab")
  .attr("id", val + "0")

If you really want multiple li, don't call this code iterative-ly, you then want the data-binding."ul#chartTabs")
  .data(["option1", "option2", "option3"])