CODEWITHSUNDEEP
htmlcsssvgd3.js
Mia
Mia

Reputation: 6531

d3.js set with attribute in percent rather than pixels

When creating the objects in d3.js, here is my regular approach:

var svgcanvas = d3.select("body")
                    .append("svg")
                    .attr("width", 100)
                    .attr("height", 100)
                    .append("circle")
                    .attr("cx", 50)
                    .attr("cy", 50)
                    .attr("r", 10)
                    .attr("fill", "red")

which creates a completely static object in the end. What I would like o do is to have something like this (notice the percents):

var svgcanvas = d3.select("#tweets")
                    .append("svg")
                    .attr("width", 100%)
                    .attr("height", 100%)
                    .append("circle")
                    .attr("cx", 50%)
                    .attr("cy", 50%)
                    .attr("r", 10)
                    .attr("fill", "red")

However it doens't seem to be possible.

When creating svg elements manually, doing this works like a charm. Here is an example http://cssdeck.com/labs/jxda8sth

For something with such a naive solution, digging auto-scale scripts is a no-no to me. So I want to ask: is it possible to do it with an almost css-only solution (like the one above)?

Upvotes: 2

Views: 2487

Answers (1)

Robert Longson
Robert Longson

Reputation: 124014

Put the values in double quotes e.g. "100%"

var svgcanvas = d3.select("body")
                    .append("svg")
                    .attr("width", "100%")
                    .attr("height","100%")
                    .append("circle")
                    .attr("cx", "50%")
                    .attr("cy", "50%")
                    .attr("r", "10%")
                    .attr("fill", "red")

And as a jsfiddle

Upvotes: 5

Related Questions