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 :

<div class="container" id="chart1"> 
</div> 
<div class="container" id="chart2"> 
</div>

그런 다음 코드에서 #chart1 및 #chart2를 사용합니다.

출처

2013-11-22 10:09:21

컨테이너를 사용할 때 둘 다 왼쪽으로 정렬됩니다. 그래서 나는 float가 오른쪽으로 하나 더있는 컨테이너를 만들었고 작동했습니다. 고마워. –

d3.js에서 두 svg를 나란히 정렬하는 방법

답변

관련 문제