如何在d3.js中並排排列兩個svg

我有兩個圖形（帶有文本的矩形，其他圓圈帶有文本）被顯示，但不是一個顯示一個在另一個下面，我想並排顯示，即2圖表水平顯示（一個在div的左側，另一個在div的右側）。我創建了2個SVG，並在其中添加了圖表。但是，當我改變頂部或底部邊距它不工作。如何在d3.js中並排排列兩個svg

我的代碼是這樣：

<!DOCTYPE html> 
<html xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Circle legends</title> 
    <script type="text/javascript" src="../../js/d3/d3.v3.js"></script> 

     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script> 

    <link rel="stylesheet" href="../../css/style.css" /> 


    <style type="text/css"> 
    </style> 

</head> 
<body> 
<div id="chart"></div> 

<script type="text/javascript"> 
    var width=960,height=500; 
    var margin = {top: 29.5, right: 29.5, bottom: 29.5, left: 59.5}; 
    radiusScale = d3.scale.sqrt().domain([1, 100]).range([10, 39]), 
    colorScale = d3.scale.category10(); 

//Create the SVG for legends. 
    var svglegend = d3.select("#chart").append("svg").attr("id","svglegend") 
    .attr("width", width-100) 
     .attr("height", height -100) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + (margin.top +30) + ")"); 


//alert("Non-empty"); 
    d3.json("SbuLegendData.json", function(data) { 

    jsondata = data; 

    rectangle= svglegend.selectAll("rect").data(data).enter().append("rect"); 
     var RectangleAttrb = rectangle.attr("x", function (d) { return d.x_axis; }) 
         .attr("y", function (d) { return d.y_axis; }) 
         .attr("width",function(d) { return d.width; }) 
        .attr("height",function(d) { return d.height; }) 
         .style("fill", function(d) { return d.color; }); 




    var textparam = svglegend.selectAll("text").data(data).enter().append("text"); 

     var text = textparam .attr("x", function (d) { return d.x_axis + d.width +10; }) 
         .attr("y", function (d) { return d.y_axis + d.height-5; }) 
         .attr("width",30) 
        .attr("height",20) 
         .text(function(d) { return d.text; }); 

    }); 


// Create the SVG container and set the origin. 
    var svg = d3.select("#chart").append("svg") 
    .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    var i =0; 

    while (i<=50) 
    { 

     console.log("i value is " + i + " value of scale " +i+ " is " + radiusScale(i)); 
     var g = svg.append("g"); 
       g.append("circle") 
          .attr("id","circle" + i) 
          .attr("cx", i*12) 
          .attr("cy", 30) 
          .attr("fill",colorScale(i)) 
          .attr("r", radiusScale(i)); 
        g.append("text").attr("dx",i*12).text(Math.round(radiusScale(i))); 

     i=i+10; 

    } 


</script> 
    </body> 
</html>

JSON數據包含：

[ 
    { "x_axis":40, "y_axis": 10,"width":50,"height":20,"color" : "#1f77b4","text":"F&R"}, 
    { "x_axis":40, "y_axis": 30,"width":50,"height":20,"color" : "#ff7f0e","text":"Legal"}, 
    { "x_axis":40, "y_axis": 50,"width":50,"height":20,"color" : "#2ca02c","text":"GGO"}, 
    { "x_axis":40, "y_axis": 70,"width":50,"height":20,"color" : "#d62728","text":"IP&S"}, 
    { "x_axis":40, "y_axis": 90,"width":50,"height":20,"color" : "#9467bd","text":"CORP"}, 
    { "x_axis":40, "y_axis": 110,"width":50,"height":20,"color": "#8c564b","text":"TAX"}, 
    { "x_axis":40, "y_axis": 130,"width":50,"height":20,"color" : "#e377c2","text":"REUTERS ALL"} 
]

來源

2013-11-22 krishna_v

您需要使用CSS這一點。它很容易，如果你有兩個容器：

CSS：

.container { 
    float: left; 
}

HTML：

然後在代碼中使用#chart1和#chart2。

來源

2013-11-22 10:09:21

當我使用容器都對齊到左側。所以我創造了一個更多的容器與浮法作爲正確的，它的工作。謝謝拉爾斯。 –

如何在d3.js中並排排列兩個svg

回答

相關問題