javascript - 如何使用D3追加几行html代码

Question

我需要使用 D3 添加所有这些代码:

 <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 元素。

我该怎么做？非常感谢

Answer 1

您可以使用 d3.html()。

只需先选择要放置控件的 socket ，然后使用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 以编程方式构建输出。

希望这对您有所帮助。