Как выровнять два svg бок о бок в d3.js

У меня есть два графика (прямоугольники с текстом в других кругах с текстом), но вместо того, чтобы отображать один ниже другого, я хочу отображать бок о бок, т.е. 2 диаграммы, отображающие горизонтально (один слева от div, а другой справа от div). Я создал 2 svg и добавил графики к этому. Однако когда я меняю верхний или нижний край, он не работает.Как выровнять два svg бок о бок в d3.js

Мой код выглядит:

<!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

, когда я использую контейнер, оба выровнены влево. Поэтому я создал еще один контейнер с float как правильно, и он сработал. спасибо, лары. –

Как выровнять два svg бок о бок в d3.js

ответ

Смежные вопросы