Javascript D3并选择未正确调整Html布局

为了调整我的HTML布局，我正在尽最大努力使用D3，但我无法按照我想要的方式调整图表

我需要得到的是：

              BAR CHART

1st PIE CHART, 2nd PIE CHART, FIELDSET

因此，我需要用“选项”

fieldset

交换第二个饼图的位置

到目前为止，我一直在尝试的是：

var svg = d3.select("#divs").append("div").attr("id","svg-cont")
                .style("margin-top", 50)//.style("margin-left", 405)
                .append("svg").attr("width", 210).attr("height", 200);

      svg.append("g").attr("id","salesDonut");

      var data = [10,20,30,40,50,60];
      var data1 = [0,10,20,30,40,50,60,70,80,90];

      if(d3.select('#opt-fieldset').empty()){
          var fieldset = d3.select("#svg-cont").append("fieldset").attr("id","opt-fieldset").style("float","left").style("width",150)
                        .html('<legend>Options</legend>\
                          <d>Rotation: </d>&nbsp;&nbsp;&nbsp;\
                          <select id="rotation" style="position: right;">\
                          </select>  &nbsp; \
                          <br><d>Inclination: &nbsp;</d>\
                          <select id="inclination" style="position: right;">\
                          </select>'); 

            var rotate = d3.select("#rotation");
                rotate.selectAll("option").data(data).enter().append("option")
                        .attr("value", function (d) { return d; })
                        .text(function (d) { return d; });

            var inclinate = d3.select("#inclination");
                inclinate.selectAll("option").data(data1).enter().append("option")
                        .attr("value", function (d) { return d; })
                        .text(function (d) { return d; });
      }else{
        console.log("Godspeed");
      }

      Donut3D.draw("salesDonut", getData(data3D),
          marginLeft, marginTop, pieWidth, inclination, pieThickness, pieHole);

var svg=d3.select（#divs”）.append（“div”）.attr（“id”，“svg cont”）
.style（“页边空白顶部”，50）/.style（“页边空白左侧”，405）
.append（“svg”）.attr（“宽度”，210）.attr（“高度”，200）；
svg.append（“g”）.attr（“id”、“salesDonut”）；
var数据=[10,20,30,40,50,60]；
var数据1=[0,10,20,30,40,50,60,70,80,90]；
if（d3.select（“#opt fieldset”）.empty（）{
var fieldset=d3.选择（“svg cont”）.追加（“fieldset”）.属性（“id”，“opt fieldset”）.样式（“float”，“left”）.样式（“width”，150）
.html（'选项\
轮换：\
\
\

倾斜度：\
\
'); 
var rotate=d3。选择（“旋转”）；
旋转。选择全部（“选项”）。数据。输入（）。追加（“选项”）
.attr（“值”，函数（d）{return d；}）
.text（函数（d）{return d；}）；
var斜面=d3。选择（“斜面”）；
倾斜。选择全部（“选项”）。数据（数据1）。输入（）。追加（“选项”）
.attr（“值”，函数（d）{return d；}）
.text（函数（d）{return d；}）；
}否则{
控制台日志（“Godspeed”）；
}
Donut3D.draw（“salesDonut”，getData（data3D），
边缘左侧、边缘顶部、边缘宽度、倾斜、边缘厚度、边缘孔）；

---

这是在Pucker->中的完整代码和结果

您可以为字段集样式创建css

.style（“float”、“right”）

大概是这样的：

var fieldset = d3.select("#svg-cont").append("fieldset").attr("id","opt-fieldset").style("float","right").style("width",150)
                            .html('<legend>Options</legend>\
                              <d>Rotation: </d>&nbsp;&nbsp;&nbsp;\
                              <select id="rotation" style="position: right;">\
                              </select>  &nbsp; \
                              <br><d>Inclination: &nbsp;</d>\
                              <select id="inclination" style="position: right;">\
                              </select>'); 

var fieldset=d3.select（#svg cont”）.append（“fieldset”）.attr（“id”，“opt fieldset”）.style（“float”，“right”）.style（“width”，150）
.html（'选项\
轮换：\
\
\

倾斜度：\
\
'); 

工作代码

---

希望这有帮助

即使您可以将字段集向右对齐，而不是向左对齐。目前HTML结构有点混乱，因为要在底部对齐的三个元素被附加到不同的父div中。它的造型最终有点粗糙。我建议如下：

将piecharts和fieldset放在同一个div容器中，然后通过CSS设置它们的样式

// Since you append the first piechart to #div1, put the second one there as well.
var svg = d3.select("#div1").append("div").attr("id","svg-cont")
                .style("margin-top", 50)//.style("margin-left", 405)
                .append("svg").attr("width", 210).attr("height", 200);

// Append the fieldset also to #div1 which has the other two pie charts
var fieldset = d3.select("#div1")
                 // I've added here another div to wrap the fieldset
                 .append('div')
                 .append("fieldset")
                 // remove the float: left
                 .attr("id","opt-fieldset").style("width",150)
                 .html('<legend>Options</legend>\
                          <d>Rotation: </d>&nbsp;&nbsp;&nbsp;\
                          <select id="rotation" style="position: right;">\
                          </select>  &nbsp; \
                          <br><d>Inclination: &nbsp;</d>\
                          <select id="inclination" style="position: right;">\
                          </select>'); 

// In your HTML, remove the float:left from the #div1
<div id="div1"></div>

// Lastly, add the following to your styles to align these 3 elements
#div1 > div {
     display: inline-block;
     vertical-align: middle;
}

//既然您将第一个piechart附加到了#div1，那么也将第二个piechart放在那里。
var svg=d3.选择（“div1”）.追加（“div”）.attr（“id”，“svg cont”）
.style（“页边空白顶部”，50）/.style（“页边空白左侧”，405）
.append（“svg”）.attr（“宽度”，210）.attr（“高度”，200）；
//将字段集也附加到#div1，它有另外两个饼图
变量字段集=d3。选择（#div1）
//我在这里添加了另一个div来包装字段集
.append（'div'））
.append（“字段集”）
//拆下浮子：左侧
.attr（“id”，“opt fieldset”）.style（“width”，150）
.html（'选项\
轮换：\
\
\

倾斜度：\
\
'); 
//在HTML中，从#div1中删除float:left
//最后，将以下内容添加到样式中以对齐这3个元素
#div1>div{
显示：内联块；
垂直对齐：中间对齐；
}

这是你的叉子