Javascript 如何使用D3附加多行html代码

我需要使用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

元素

我该怎么做？非常感谢

您可以使用

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.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.选择（'#where-i-want-to-add-more-content'）.html(
d3.select（“#where-i-want-to-add-more-content”）.html（）+//获取已经存在的内容。。。
' \
选择权\
轮换：\
\
\
\
倾斜度：\
]
\
\
'
);

…虽然，在这一点上，它可能会变得有点混乱，您最好为消息使用一个特定的容器，您可以每次覆盖消息的内容。或者使用

d3.append

以编程方式构建输出

---

希望这能有所帮助。

是的，它能发挥作用。。。问题是

“#where-I-want-the-output”

中包含的所有内容都会被覆盖。。。有没有办法保存它？您可以将一个空元素放在适当的位置作为输出——例如，将

#where-i-want-the-output

作为一个隐藏的div，放在实际需要输出的地方。或者您可以使用

d3.append

来构建控件。或者您可以使用

d3.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>'
);