I'm so sorry to ask this, but i have a pile of D3 v3 code, and I'm in no place to upgrade to v4
Sadly, i don't know what a lot of the code does - and everytime I look for "rangeRoundBands" all i get are people discussing where it went in D3 v4
What do the arguments for rangeRoundBands actually do?
I found this amazing page - so from it i can see there are at least two arguments.
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
The rangeRoundBands operator provides the magic that arranges our bars in a graceful way across the x axis. In our example we use it to set the range that our bars will cover (in this case from 0 to the width of the graph) and the amount of padding between the bars (in this case we have selected .05 which equates to approximately (depending on the number of pixels available) 5% of the bar width.
Related
I've been working with Mike Bostock's stacked bar chart (here: https://bl.ocks.org/mbostock/4679202).
I've successfully made a number of modifications, but what I'm stuck on is trying to add a y axis with ticks and properly scaled values.
I thought it would simply be done by using this:
var yAxisRight = d3.svg.axis().scale(y2) //define ticks
.orient("right").ticks(5);
However, that results in the values for only ONE set of the stack being used for the entire Y axis. This results in an incorrect scale. The values for the range of all stacks COMBINED needs to be used to determine the range of values I believe.
Is there an easy way to do this that I'm missing? To sum the range of all the columns.
If not, how would I write a function to set the range based on the values in all 4 columns?
Here is a working JSfiddle of what I have now (which is incorrect):
https://jsfiddle.net/1jhm7ths/
If I understood correctly what you tried to achieve, you need to compute your range based on your stacked data and not the original ones. I updated your jsFiddle with the following modification on line 92:
y2.domain([0, d3.max(dataByGroup, function(d) { return d3.sum(d.values, function(v) {return v.value;}); })]); //added
What this does is taking each group, computing the sum of all values, and the taking the max of the sums.
On a side note, I would discourage learning d3 v3 and try to focus on the v4 for longer term support, latest functionalities, modulariy, and a ton of other advantages.
Say I have some data (e.g. book loans and book returns). I want to plot this in a histogram, but I also want it to be 'stacked' in that book loans should be positive (above the x axis) while book returns should be negative (below the x axis). I've not been able to find any documentation on this, and the closest example is this one, but it uses the old v3 of d3 (which has changed a LOT regarding the stack api), and it also doesn't have negative stacks. The key thing here is that originally the book return data point isn't negative (in fact, it can't be, since the histogram api generates the bins), so I can't simply force that one series to appear below the axis in that way.
edit: after struggling with histograms + bins for a while, I finally got an example going at this pen. In my case, I'd like for the 'FixedRemaining' series to appear below the axis while the 'Remaining' series stays above. The data is pretty simple, and the code for drawing the rects is taken mostly from this example. In particular, I suspect this line would have to change:
.attr("y", function(d) { return y(d[1]); })
since it currently just sets the height to be above the axis. I know the domain would also have to be modified to take into account the below-axis part.
Answered by mbostock in this block here: https://bl.ocks.org/mbostock/b5935342c6d21928111928401e2c8608
I am using dimple.v2.3.0 to create line and area chart. When creating chart with category x-axis, Dimple leaves a gap between the y-axis and the line/area. I would like to ask is there any way to remove the gap?
I'm afraid there isn't a good answer for this, it's done this way because dimple allows you to combine with bars etc. There is a time axis for dates which will not include the gap and therefore answers the majority of cases with area charts, however categorical axes will always have the gap.
There is a hacky workaround you can use in this case where you have integers on your x axis which is to treat them as dates and put them on a time axis:
var x = myChart.addTimeAxis("x", "Call", "%Y", "%-Y");
x.timePeriod = d3.timeYear;
x.timeInterval = 1;
This will parse and display your calls as years and display them on the time axis. The "%-Y" display format shows a 4 digit year with no leading zeroes. This will work for integers up to 9999. Here it is working in your fiddle:
https://jsfiddle.net/zuuaar1t/
I am drawing charts using dc.js.The following is a frequency VS Day Chart
I am using the following line to generate the titles:
..something.yAxisLabel("Frequency").xAxisLabel('Day');
But the problem is as you see when the frequency is so large the Y axis title is colliding with the frequency numbers. So is there any simple way to move the Y axis title left?
The layout of auxiliary elements such as axes and legends is not completely automatic in dc.js; use .margins() to adjust where necessary.
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#marginsmargins
It would be great to figure this out automatically but it is difficult to calculate, and easy to work around, so I guess no one has gotten annoyed enough to submit a fix. :)
I am trying to create a graph based on Mike Bostock's Heirarchical Edge Bundling(here is the gist). I need to make my JSON look as readme-flare-imports.json looks, but I can't figure out what "size" is. I read the API and it didn't seem to help me. Also, it will be a dynamic JSON file based on a mySQL database, so I won't be able to set the size myself. Is anybody able to clear things up for me as to what it is or how I may be able to determine what the size should be? Thank you in advance!
cluster.size determines how large of an area the cluster will take up. You pass values to it like so
// The angle
var x = 360;
// The radius
var y = window.height / 2;
cluster.size([x, y])
x will determine how much of a circle the cluster will use to branch out children. A value of 360 will use the entire circle to display all values. A value of 180 will only use half the circle to branch out values.
y will determine how wide the circle will become in any single direction, i.e., the radius of the circle.
In the Heirarchical Edge Bundling example, I believe the size attribute in the json file is ignored as I could not find anything in the code that cared about it.