Как использовать D3, чтобы добавить несколько HTML строки кодов

мне нужно добавить весь этот код с помощью D3:Как использовать D3, чтобы добавить несколько HTML строки кодов

<fieldset style="width: 280px; margin-left: 45px; position: absolute;" > 
     <legend>Options</legend> 
      <d>Rotation: </d>&nbsp; 
      <select id="rotation" style="position: center;"> 

      </select> &nbsp; 
      <d>Inclination: &nbsp;</d> 
      <select id="inclination" style="position: center;"> 

      </select> 
    </fieldset>

Причина, почему мне нужно D3, что я хочу, чтобы добавить этот фрагмент кода только после того, как определенная задача была завершена, и только после этого я хочу заполнить два элемента Select.

Как я могу это сделать? Большое спасибо

источник

2015-11-25 Cris Cole

Вы можете использовать d3.html().

Просто начните с выбора розетки, в которой вы хотите разместить элементы управления, а затем используйте метод html для их вставки.

d3.select('#where-you-want-the-output').html('<fieldset style="width: 280px; margin-left: 45px; position: absolute;" ><legend>Options</legend><d>Rotation: </d>&nbsp;<select id="rotation" style="position: center;"></select> &nbsp; <d>Inclination: &nbsp;</d><select id="inclination" style="position: center;"></select></fieldset>');

И если вы хотите сохранить форматирование в исходном коде, вы можете использовать \ сделать строку из нескольких строк.

d3.select('body').html(
'<fieldset style="width: 280px; margin-left: 45px; position: absolute;" > \ 
    <legend>Options</legend> \ 
    <d>Rotation: </d>&nbsp; \ 
    <select id="rotation" style="position: center;"> \ 
\ 
    </select> &nbsp; \ 
    <d>Inclination: &nbsp;</d> \ 
    <select id="inclination" style="position: center;"> ] 
\ 
    </select> \ 
</fieldset>');

Если вы передадите аргумент d3.html он установит HTML для этого выбора, но если вы это называете без аргумента, он будет возвращение, что уже есть. Таким образом, если у вас уже есть содержимое, которое может потянуть его в виде строки, как это ...

d3.select('#where-i-want-to-add-more-content').html(
    d3.select('#where-i-want-to-add-more-content').html() + // get what's already there... 
    '<fieldset style="width: 280px; margin-left: 45px; position: absolute;" > \ 
    <legend>Options</legend> \ 
     <d>Rotation: </d>&nbsp; \ 
     <select id="rotation" style="position: center;"> \ 
    \ 
     </select> &nbsp; \ 
     <d>Inclination: &nbsp;</d> \ 
     <select id="inclination" style="position: center;"> ] 
    \ 
     </select> \ 
    </fieldset>' 
);

... хотя, на данный момент, это, возможно, становится немного грязным, и вы могли бы быть лучше, имеющими конкретный контейнер для сообщения, что вы в порядке перезаписываете содержимое каждого раза. Или используя d3.append, чтобы программно вывести ваш выход.

Надеюсь, это поможет.

источник

2015-11-25 18:32:03

Да, он выполняет свою работу ... проблема в том, что все, что содержится в '' # where-I-want-the-output'', перезаписывается ... есть ли способ его сохранить? –

Вы можете поместить пустой элемент на место, чтобы выступать в качестве розетки - например, make '# where-i-want-the-output' быть скрытым div внутри, где вы _actually_ хотите выход. Или вы можете использовать 'd3.append' для создания своих элементов управления. –

_Or_ вы можете использовать 'd3.html' для захвата текущего содержимого и добавить его перед вашей строкой. Я обновлю пример, чтобы проиллюстрировать ... –

Как использовать D3, чтобы добавить несколько HTML строки кодов

ответ

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