Menu
I have two graphs(rectangles with text the other circles with text) to be displayed but instead of displaying one below the other,I want to display side by side i.e 2 charts displaying horizontally(one at the left of div and the other at right of div). I created 2 svg's and added the charts in to that. However when ever i change the top or bottom margin it is not working.
My code goes like:
<!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>
the json data contains:
[
{ "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"}
]
384
The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. We can create a group element with D3. js by appending a g element using any selection. var shapeGroup = svg.
Step 1 − Create a container to hold the SVG image as given below. Step 2 − Select the SVG container using the select() method and inject the SVG element using the append() method. Add the attributes and styles using the attr() and the style() methods. var width = 300; var height = 300; var svg = d3.
Points in D3 using SVG For points, you can use the circle tag. As you can see on the following example, the circle position and radius is controlled by the cx , cy , r attribues.
You need to use CSS for this. It's easier if you have two containers:
CSS:
.container {
float: left;
}
HTML:
<div class="container" id="chart1">
</div>
<div class="container" id="chart2">
</div>
Then use #chart1 and #chart2 in your code.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
