Question

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

我需要获得的是：

              BAR CHART

1st PIE CHART, 2nd PIE CHART, FIELDSET

因此，我需要将第二个饼图的位置与＆＃34;选项＆＃34; 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的完整代码和结果 - ＆gt; (Click on any bar in order to display the 2 pie charts and the fieldset)。

Answer 1

您可以为字段集样式.style("float","right")

创建css

这样的事情：

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

工作代码here

希望这有帮助！

Answer 2

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

将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;
}

这里有一个DEMO与您分开。

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

2 个答案: