I am trying to make this script responsive and need it to use % rather than pixels but it seems to blowup. Is there some kind of syntax I am missing when I use a %? Does it need escaped or something?
Its currently set to 960 but I would like it to be 100%. I tried to breakout the relevant code but didn't find anything in the script that had "px"set.
var margin = { top: 50, right: 0, bottom: 100, left: 30 },
width = 960 - margin.left - margin.right,
height = 430 - margin.top - margin.bottom,
gridSize = Math.floor(width / 24),
legendElementWidth = gridSize*2,
buckets = 9
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 + ")");
You need to include the units as a string:
.attr("width", width + margin.left + margin.right + "%")
By default, the unit used is pixels (px). So if you want any unit other than pixels, you must include it as a string.
U need to use following
d3.select("#chart").append("svg").attr("width", ''+width + margin.left + margin.right+'%')
OR u can also use
.css("width", width + margin.left + margin.right + "%")
if width attribute is getting appended separately .Means outside style="" tag.
Same for others also
Related
I'm doing a javascript for drawing tree, but the tree part is being hidden. I need scroll for large data. Can I add more attribute in somewhere in the code below
// ************** Generate the tree diagram *****************
var margin = { top: 20, right: 120, bottom: 20, left: 350 },
width = screen.height - margin.right - margin.left,
height = screen.height - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function (d) { return [d.x, d.y]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.style('overflow', 'auto')
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var root = treeData[0];
I basically have a barchart, and I want to put 2 texts. I want to put a title at a distance from my graph (top 30px for example). and I want to put a subtitle at a distance from the graph, so that it is located in the bottom right (bottom 30px for example)
No matter what method I use, my texts are always above my graphic, I wish I had separation margins between graphic and texts.
Desired effect:
what am I doing wrong?
this is my live code:
https://plnkr.co/edit/mRjyYN9nWiMWYRzj7Gtf?p=preview
var svg = d3.select("body").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 + ")");
//set title
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text("title");
//set bottom-right text
svg.append("text")
.attr("x", 960 - 80)
.attr("y", 500 - 30)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.text("subtitle");
current problem using your code (user lemming):
Normally you subtract the margins from the dimension of the div you are rendering to, like this, assuming the div is 800 x 600
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
Does that make sense?
I have an adjacency chart which has about 1000 nodes and to make it readable I need the chart to be scrollable on the x-axis. I have the below which outputs the chart by using the div's scroll bars though this is cumbersome.
How do I change the below to allow the chart to pan left and right on mouse click / zoom?
Cheers
var x = d3.scale.ordinal().rangeBands([0, width]),
z = d3.scale.linear().domain([0, 4]).clamp(true),
c = d3.scale.category10().domain(d3.range(10));
var svg = d3.select("#graph-item").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 + ")");
I'm new to D3. I want to display a sentence on screen, I have the words in an array, when i run the code all words are overlapping, I want them displayed in a natural way like normal text.
var margin = {top: 20, right: 20, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svgContainer = d3.select("body").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 cars=["this","is","a","normal","sentence"];
var text = svgContainer.selectAll("text")
.data(cars)
.enter()
.append("text");
//Add SVG Text Element Attributes
var textLabels = text
.text( function (d) { return d; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
One simple way is to use tspan elements within a single text element.
var margin = {top: 20, right: 20, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svgContainer = d3.select("body").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 text = svgContainer.append("text");
var cars=["this","is","a","normal","sentence"];
var text = text.selectAll("tspan")
.data(cars)
.enter()
.append("tspan");
//Add SVG Text Element Attributes
var textLabels = text
.text( function (d) { return d + ' '; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I am using D3.js to draw a tree,same with this chart:
http://bl.ocks.org/mbostock/7809166
But the height and width are fixed, I wanna the height can be auto adjust by the content.
My code:
var svg = d3.select("#feature_tree").append("svg")
.attr("width", width + margin.right + margin.left)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
If i do not define the height, the tree cannot be showed fully, unless I enlarge the browser, the missing tree nodes can be shown.
If i define the height, e.g. height = 2400px; if the content is very short. there will be a big blank.
You can measure the height of the content and adjust the SVG element accordingly:
var svgEl = document.getElementById("my-svg"),
bb = svgEl.getBBox();
svgEl.style.height = bb.y + bb.height;
svgEl.style.width = bb.x + bb.width;
Simple demo here: http://codepen.io/anon/pen/gpwbKd