javascript - D3 和​​ Select 没有正确调整 Html 布局

Question

我正在尽最大努力使用 D3 来对齐我的 HTML 布局，但我无法按照我想要的方式对齐我的图表。

我需要获取的是:

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

这是 Plucker 中的完整代码和结果 -> (Click on any bar in order to display the 2 pie charts and the fieldset) .

Answer 1

即使您可以将字段集对齐到右侧而不是左侧。恕我直言，您的 HTML 结构目前有点困惑，因为您要在底部对齐的三个元素附加到不同的父 div。造型最终变得有点古怪。我建议如下:

将饼图和字段集放在同一个 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;
}

这里是DEMO从你的 fork 。