I'm having trouble having the bar graph contained within the axis. I tried adjusting the margin but it's still below the x-axis. Any suggestions would be appreciated. Thankyou
this is my margin:
margin = {
top: 70,
right: 20,
bottom: 70,
left: 70
},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
padding = 15;
Related
With d3.js I have created d3 dendrograms to visualize hierachicals relations between objects. Dimensions and margins of the graph are defined with fixed height and width values.
var width = 1000,
height = 800,
boxWidth = 150,
boxHeight = 35,
gap = {
width: 50,
height: 12
},
margin = {
top: 16,
right: 16,
bottom: 16,
left: 16
},
svg;
With a few relations, display is ok but with many relations it's doesn't fit, graph is 'cut' and I can't see the entire graph. How to set this width and height properties dynamically and adjusted to the size of the graph ?
An example with a correct display : Codepen
An example with an incorrect display : Codepen
Let's work this out, you need to know the bounding box of your content first and then adjust the svg size. To do that, in this particular case, you only have to look at the boxes or nodes and can ignore the links.
With that in mind you can do the following after populating the Nodes in your renderRelationshipGraph function and return the calculated value:
function renderRelationshipGraph(data) {
// ...
var bbox = Nodes.reduce(function (max, d)
{
var w = d.x + boxWidth;
var h = d.y + boxHeight;
if (w > max[0]) {max[0] = w}
if (h > max[1]) {max[1] = h}
return max
}, [0,0])
return bbox
}
then on the main code change use it to update height and width of the svg:
svg = d3.select("#tree").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("g");
var bbox = renderRelationshipGraph(data);
svg.attr("width", bbox[0])
.attr("height", bbox[1]);
You can add a transition and limit the height but this does what you requested with a really large end result.
Which parameter should I manipulate to have whole labels visible here? As you see, hundreds are displayed as "00", "20" and so on:
There is a related question linked here: How to increase tick label width in d3.js axis
Eventually it lead me to this piece of code (padding was already defined in my script):
var padding = 25;
var margin = {top: 20, right: 40, bottom: 30, left: 60},
width = 560 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
Manipulating these values (margins and padding) finally gave me the result I wanted: the Y-axis labels are visible:
Some Informations:
I have a composite Linechart.
And my Question is:
Im using elasticY but my axis beginns at 0 but my smallest value can be 250.
Is there a chance to start the Y Axis from 250 and not from 0 ? But the dynamic Y axis should work (elasticY)
var compositeAvg = dc.compositeChart("#avgline-chart");
compositeAvg.width(1500).height(375)
.group(filtered_group)
.brushOn(true)
.yAxisLabel("Morbalwait AVG ")
.x(d3.scale.ordinal()) //x axis
.xUnits(dc.units.ordinal)
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
.elasticY(true)
.elasticX(true)
._rangeBandPadding(1)
.compose(composeLines())
.legend(dc.legend().x(1425).y(0).itemHeight(13).gap(1));
have you tried .y(d3.scale.linear().domain([250, yourmaxvalue]))
I am trying to follow the below example http://bl.ocks.org/mbostock/6452972 and i ve not been very successful in understanding the specifics involved. Would be great if someone can help me in explaining where the co ordinates and size of the slider can be customized? ps I am new to d3 and javascript :(
You can play with the size of the slider using the margin and size properties:
var margin = {top: 100, right: 50, bottom: 100, left: 50},
width = 460 - margin.left - margin.right,
height = 200 - margin.bottom - margin.top;
JSBin here
I'm new to using d3js to build graphs. My current task is charting no of logs across time. So my Y axis is logs and x axis is time. For some data, the graph comes fine within the grid line, but for some where the data is huge, it flows out of the grids like below. Also even if I am charting 3 or 4 days in the past, I only see 2 days on the axis. Below also the code that I use for setting height. I'm using time scale on x axis and linear scale on y axis.
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select(".content").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 x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height,0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
How can I set the height and width to be according to the data?