We Keep Coding

How to use a svg inside a svg?

I am using D3.js and i try to create a svg inside an svg.
For example my first svg is this:
var svg = d3.selectAll('body')
.append('svg')
.attr('width',500)
.attr('height',500);
Then i want to create a second svg inside this first one and i want it to appear at the upper right corner of my first svg. How is that possible? I thought about the attributes of width = 100 and height = 100 for the second svg. The reason for this question is, that i use the force-layout in D3.js and it can be realy big depending on the input of data. So i want to put the graph itself in the first big svg and other informations like texts in the smaller second svg. If a solution with div elements could be better, please let me know.

Just append another SVG within the first.
var svg = d3.selectAll('body')
.append('svg')
.attr('width',500)
.attr('height',500);
var innerSVG = svg.append('svg')
.attr('width',100)
.attr('height',100);

Is there a way to select parent div without knowing its class name or ID ?

I have a graph i have made in javascript library d3. The size of it depends on the size of the window like so :
var GUIWidth = window.innerWidth;
var GUIHeight = window.innerHeight;
This works fine but what if i want to put this graph onto another page but make it smaller ? I dont want to go into here and adjust it, I want to be able to get the size of the container its held in and use that width and height.
But, in my case i don't know the ID of the container (because another person is developing the UI).
How do I get the ID (and width and height preferably) of the parent div that my graph is held in.
Here is example code :
var svg = d3.select("#interface") //this is my graphs container
.append("div")
.attr("id", "svgContainer")
.attr("width", GUIWidth)
.attr("height", GUIHeight);
Here interface is my graphs container but i want to do something like this to get the width and height :
var GUIWidth = $(parentOf('#interface')).innerWidth();
var GUIHeight = $(parentOf('#interface')).innerHeight();
Is this possible ?
Also I'd like to stick to javascript/jquery to do this as I'm using the GUIWidth & GUIHeight variables elsewhere in my code to determine sizes of other divs :)
Thankyou

Tried this?
var GUIWidth = $('#interface').parent().innerWidth();
var GUIHeight = $('#interface').parent().innerHeight();

In d3.js how to create a dynamic scale value for projection?

Am beginner for d3.js. I create a geomap with using d3.js.My map is working fine but i have some problem in scaling.
I need to display my map with full screen of the window.
So i created with using below code.
// Html Part
<div id="world-placeholder" style="width:100%;height:auto;">
</div>
// Script part for generating SVG
<script>
var svg = d3.select('#'+id)
.append('svg');
// Set Width & Hight
var width = $("svg").parent().width();
var height = width/2;
// Set Projection
var projection = d3.geo.robinson()
//.scale(100)
//.scale((width/height)*100)
.translate([width/2, height/2]);
// Set Path
var path = d3.geo.path()
.projection(projection);
</script>
Basically am trying to plot the map with using current width of the screen by using $("svg").parent().width();
So my question is how to stretch my map with full screen.
Result screen Before Scaling (Not used any scaling)
Result Screen After Scaling (Used scale(200) for stretching)
Scaling Code Part
var projection = d3.geo.robinson()
.scale(200)
.translate([width/2, height/2]);
How to Scale dynamically based on window size? or any other way to display a map with full screen for all devices?
Please help me to solve.
Thanks in advance.

I use something like this for screen size :
var GUIWidth = window.innerWidth; //-screen width
var GUIHeight = window.innerHeight; //-screen height
Maybe creating a JSFiddle would help people solve your problem easier :)

You can even use:
document.getElementById("cont").clientHeight and document.getElementById("cont").clientHeight for calculating dynamic width and height of your container. In this case "cont" is a div with 100% height and width.

appending d3.js canvas to div

I'm attempting to add a legend to a graph, and I want to append it to my chart div. Right now I'm using the following code, which appends the legend to the "body". I would like to instead append it to my "chart" div, so that I can create a footer after my legend. Right now the HTML page is processed first, and then my d3 javascript file gets run and therefore the legend gets placed below my footer. Thank you in advance.
// Create the svg drawing canvas...
var canvas = d3.select("body")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 300);//canvasHeight);

The following works, like I pointed out in the comment.
var canvas = d3.select("#chart")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 300);//canvasHeight);
Cheers :)

Changing Element Position on Page JS/D3

This is a simple question that I just can't seem to get figured out -- All I want to do is change the position of an element on a page. I've tried the following:
// Text
body = d3.select('body')
sometext = body.append('text').text('testing') // text appears
// Different Ways i've tried to move it
.attr('cx', 40)
.attr('x', 40)
.attr("transform", "translate("40, 100")
However, none of this moves the text -- What am I missing (http://jsfiddle.net/Hn5JX/)? I'm having the same issue moving svg elements around a page, i just thought this was easier to see on the jsfiddle. Thanks for help with a basic question,

Here's an example of moved text using d3js.
http://jsfiddle.net/JnNtZ/
Make sure to include:
"http://mbostock.github.com/d3/d3.js"
Then include the following javascript
// Create an svg "canvas" to place text on
var w = 400, h = 400;
var vis = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Add text and set attributes
var text1 = vis.append('text').text('text1');
var text2 = vis.append('text').text('text2');
text1.attr("y", "300").style("fill", "red");
text2.attr("x", "200").attr("y", "403").style("fill", "blue"); // Notice how this text is on the edge of the canvas
​
I think the problem you were running into is that upon selecting text, you're getting an HTML element instead of an SVGText element (It seems you need an SVG element to allow manipulations by d3js). You also need to make sure that the (x,y) coordinates of the text fall inside the given canvas.