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:
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.
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;
I'm learning to make charts in d3 from scratch without taking someone else code and modifying it. I can successfully create a x & y axis vertical bar chart. But when it comes to transform the same chart to horizontal bar chart I end up in a mess. Here is my code so far:
var data = [{
name: "China",
value: 1330141295
}, {
name: "India",
value: 1173108018
}, {
name: "Indonesia",
value: 242968342
}, {
name: "Russia",
value: 139390205
}];
//set margins
var margin = {
top: 30,
right: 30,
bottom: 30,
left: 40
};
var width = 960 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
//set scales & ranges
var yScale = d3.scaleBand().range([0, height]).padding(0.1)
var xScale = d3.scaleLinear().range([0, width])
//draw the svg
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 * 2 + "," + margin.top + ")")
//load the data
data.forEach(function(d) {
d.population = +d.population;
});
//set domains
xScale.domain([0, d3.max(data, function(d) {
return d.population
})])
yScale.domain(data.map(d => d.name))
//add x & y Axis
svg.append("g")
.attr("transform", "translate(" + 0 + "," + height + ")")
.call(d3.axisBottom(xScale));
svg.append("g")
.call(d3.axisLeft(yScale))
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("y", d => yScale(d.name))
.attr("height", d => yScale(d.name))
.attr("x", d => width - xScale(d.population))
.attr("width", yScale.bandwidth())
Thank you very much.
You need to change a lot of things in your code.
TL;DR
change value to population in the array
scales are used to convert values to proportional pixel values
height is the vertical size of an element. you should use yScale(d.name)
width is the horizontal size of an element. you should use xScale(d.population)
y is the vertical position of an element. you should use yScale.bandwidth()
x is the vertical position of an element. you should use 0
use selectAll("rect") on a new appended g or the svg element not the same g element that has the axises on it
add fill attribute so that your rects have color
You have the population field labelled value but you're calling population through out the code to use it. So replace value with population in your data objects.
Next you need to change the way you're setting up the rects. use selectAll on the svg element directly or append another g to the svg element and add the rects on that element. Right now your code attempts to add the rects to the same g element as the x axis.
Make sure you are setting the attributes of the rects correctly. Height is the size in pixels of the rect element not the position. y is the position of the rects vertically from the top downwards. this means the height attribute should use yScale(d.name) and width should use xScale(d.population) because they are the width and length of the rectangles, or rect elements. x and y are the coordinate positions of the element from the top left corner of the svg element. Use them to determine the starting position of the top left pixel of your rects. You should have y as yScale.bandwidth() and x as 0.
I have a rowChart that can have more or less bars based on what you filter on other graphs.
The problem is that if I set the height of the graph to e.g. 500, if I have 50 bars they will be 10px height but if I have only one, it will be 500px
var graph = dc.rowChart (".graph")
.margins({top: 0, right: 10, bottom: 20, left: 10})
.height(300)
.width(200)
.gap(0)
.x(d3.scale.ordinal())
.elasticX(true)
.ordering(function(d){return -d.value})
.dimension(dim)
.group(filteredGroup);
The group will return the top 10, but if you filter (using other graphs, you might have as low as a single item. In that case, that bar is 300px height and it looks not good (and in general, having the height change that much is not pleasant IMO).
Is there a way to leave the height of the graph flexible but the height of each bar fixed?
So to say that each bar has a height of 30, but the height of the graph is going to adjust from 30 to 300.
According to the latest documentation for DC row charts:
.fixedBarHeight([height])
Get or set the fixed bar height. Default is [false] which will
auto-scale bars. For example, if you want to fix the height for a
specific number of bars (useful in TopN charts) you could fix height
as follows (where count = total number of bars in your TopN and gap is
your vertical gap space).
Example:
var chartheight = 500;
var gap = 5;
var count = 20;
var spaceForScales = 70;
c.fixedBarHeight((chartheight - (count + 1) * gap - spaceForScales) / count);
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