如何在d3.js中将两个SVG并排对齐

Question

如何在d3.js中将两个SVG并排对齐

5

我有两个图表（一个带文本的矩形，另一个带文本的圆形），需要展示在同一行，而不是一个在下面另一个在上面。我想要水平展示两个图表（一个在div左侧，另一个在div右侧）。我创建了两个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"}
]

- krishna_v

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

您需要使用CSS来完成此操作。如果您有两个容器，那么这会更容易：

CSS:

.container {
  float: left;
}

HTML:

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

然后在你的代码中使用#chart1和#chart2。