I've been putting in a lot of effort working with D3 to align my HTML layout, but I'm struggling to get my charts to align as desired.
What I'm aiming for is:
BAR CHART
1st PIE CHART, 2nd PIE CHART, FIELDSET
So, what I need to do is switch the position of the second Pie Chart with the "Options" fieldset.
Here's what I've attempted so far:
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> \
<select id="rotation" style="position: right;">\
</select> \
<br><d>Inclination: </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);
For the complete code and result in Plucker, check out (Click on any bar to display the 2 pie charts and the fieldset).