I tried to create svg element using d3.js in code pen using following code spinet but it did not work for me, infect the height and width was were getting applied to the element as expected.
var svg = d3.select("body").append("svg").attr({
width:800,
height:800
});
Anyways the bellow code worked:
var svg = d3.select("main")
.append("svg")
.attr("width", w)
.attr("height", h);
Can anyone please help me why the first code spinet does not work in codepen, while it is working fine in local files?
Related
I've just started using D3 V4 and I'm having trouble getting a pan and zoom function working. The problem is that I want the initial scale value to be something over than 1 so I set this using
zoom.scaleTo(svg, 2);
However as soon as I pan or zoom the scale resets back to 1.
Here's an example of this behavior on JSFiddle, what am I doing wrong?
JSFiddle
Here's the problem:
var svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.call(zoom)
.append("g");
You are assigning the group element instead of the svg element to the variable svg.
The zoom is correctly applied to the svg element, but then when you call zoom.scaleTo(svg, 2) you are zooming the group element, not the svg element.
This can be fixed by first creating and assigning the svg element to the svg variable and only then creating and assigning the group element.
var svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.call(zoom);
var mainContainer = svg.append("g");
Here's the fixed JSFiddle: https://jsfiddle.net/skgktrcu/2/
I have following problem...
I took the Interactive map of Germany from Mike Bostock (http://bl.ocks.org/oscar6echo/4423770) and wanted to define the svg as an HTML Tag. Then select the svg with D3 and put the map in it (Javascript). But it doesn´t work.
Here´s some code:
var svg = d3.select("#map").append("svg:svg")
.attr("width", width)
.attr("height", height);
...
</script>
<svg id="map"></svg>
</body>
It only works when I select the "body". I tried it with an div, but it doesn´t work as well. Thanks for any help!
Unless I'm being silly, there must be something slightly wrong in your code which isn't in the snippet you posted.
I'm fairly new to this too, but you shouldnt need to define a 'map' svg, and then use D3 to append another svg to it. Defining it as a div (or using the body) and appending the svg is sufficient.
I reproduced the code fine in a fiddle here: http://jsfiddle.net/brxxgb5n/
I've just used
<body>
<div id="map"></div>
</body>
for the html, and then JS as:
var svg = d3.select('#map')
.append("svg")
Hope that helps.
I am trying to get the d3 svg visualization on this page to fill the screen.
The HTML in my files is an empty div:
<div id='d3'>
</div>
When the page loads, it is populated with the following:
<svg width="1390" height="475"><g transform="translate(55,55)"> … </g></svg>
How can I tweak this width and height before hand to make it fill the page?
If you want to fill the screen with you svg maybe you can do this:
var width = $(window).width();
var height = $(window).height();
var svgContainer = d3.select("#d3").append("svg")
.attr("width", width)
.attr("height", height);
I'm very new to D3! So can't give more info..but I found this JQuery Answer which you could use to first get at the width then just plug it in.
https://stackoverflow.com/a/1038765/709872
Apparently without JQuery to help it's more complicated! Hope this points you in the right direction.
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 :)
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.