Как создать только один элемент li для вызова d3.append?

Я передаю имя флажка в JQuery d3, чтобы отобразить новую вкладку li с тем же именем.Как создать только один элемент li для вызова d3.append?

Но то, что я пробовал передать в имени опции, например, «option1», создает новую вкладку для каждой буквы строки, используя опцию .data(val).

Так в моем примере ниже val = "option1" и создать вкладку, как это:

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; })

Вопрос:

Как я могу создать только одну вкладку каждого вызова d3.append?

Это токовый выход при прохождении в валу "option1". Который не, как и ожидалось, поскольку он создает новую вкладку для каждой буквы. Вместо одной кнопки со значением option1.

источник

2016-08-08 Brian J

ОК, что работает, но я заметил, что второй вызов этого кода удаляет предыдущую кнопку «option1» с помощью новой кнопки «option2». Я ищу, чтобы добавить новую кнопку option2 рядом с кнопкой option1. Есть идеи? –

Вам не хватает точки привязки данных. Если вам нужно несколько 'li', не должно быть нескольких вызовов. Только один вызов с такими данными, как '.data (['option1', 'option2'])'. – Mark

В этом примере использования пользователь имеет список параметров диаграммы, пользователь выбирает параметр, который создает новую кнопку и диаграмму. При выборе следующей опции добавляется еще одна кнопка и диаграмма. Это позволяет пользователю выполнять вкладку между отображаемыми диаграммами. Вместо того, чтобы рисовать все за один раз. –

d3 является принуждая вашу строку в массив, вы могли бы просто использовать .data([val]) или пропустить привязки данных все вместе, так как вы на самом деле не использовать его:

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

Если вы действительно хотите несколько li, не называйте этот код итеративным, тогда вам понадобится привязка данных.

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

источник

2016-08-08 14:42:49 Mark

Как создать только один элемент li для вызова d3.append?

ответ

Смежные вопросы