Even if I set
bChart.x(d3.scale.linear().domain([0, 1000]))
It shows x-axis ticks from -200 or so. I want to remove the negative marks. Please suggest.
I just figured out the problem. It was because of the X-axis padding that I was applying unknowingly to the bChart.
I reset the padding to zero and axis domain becomes as expected.
bChart.xAxisPadding(0)
Related
When I have some values in the XY chart, some column label locations' are exceeding the boundary of the chart, like in the image, how can I suppress that?
You can solve this by either increasing paddingRight of the whole chart or by setting axis.maxLabelPosition = 0.98 which would result last label to be hidden.
I've been working on a similar stacked bar chart to that in the example here https://bl.ocks.org/mbostock/1134768 however running d3 v4 as shown in the fiddle here https://jsfiddle.net/z75L7cfz/7/
However as you can see in the fiddle, I have a problem that the last element in the graph extends off the end of the axis. I mean I guess this makes sense. But I'm not sure how to make this show in the graph and ensure all the elements fit into the supplied width of the graph.
I assume I need to modify the domain of the x-axis which is currently
x.domain(d3.extent(data, function(d) { return d.Date; }));
But other than somehow manually adding an extra data point with no data in but the subsequent date I'm not sure how to manage this. If anyone could supply any pointers it would be hugely appreciated!
For bar charts, it is best to use band scale. It calculates the bar sizes, location and padding.
var x = d3.scaleBand()
.range([0, width])
.padding(0.05);
Here is the updated fiddle:
https://jsfiddle.net/dtb02eze/2/
Actually, there is nothing wrong with the code per se. The problem here is the very concept of a time scale, and the use of a bar chart with such scale.
If you look closely in your fiddle, each bar starts exactly where it should start, that is, the x value of each bar corresponds to the temporal value in the x axis. But a bar has a width, and here lies the problem: when you set the width to 18px (or any other value), the bar will overflow the time scale. That's normal and expected.
A time scale should be used with dots, where every dot (adimentional) sits exactly in the correct position of the time scale, or with a line, which is simply a path connecting the dots.
Having said all that, you have two options:
Use an ordinal scale. A bar chart is not supposed to use a time scale, and a time scale is not supposed to be used with a bar chart. Bostock's code, for instance, uses an ordinal scale:
var x = d3.scale.ordinal()
You can use scaleOrdinal or, better yet, scaleBand.
If you want to stick to the time scale, change your chart to a line chart. Technically speaking, a line chart is the best option to visualize a trend in data over intervals of time.
I have been looking around for quite a long time now, it seems that I am not the only one to ask but no working answers yet:
Generally, how can we align a secondary axis in D3 (Y2 ticks in front of Y1 ticks)?
I am not especially looking for a bit of code; even a general idea or algorithm could help me. The idea is to have something like this guy did in Highchart:
jsfiddle.net/jugal/3qdkc/
Any clues?
You can use a scale's .invert() function to convert projected (screen) coordinates back to values in the original domain. Bearing this in mind, the process is
Get the projected values for the first axis. If you want those to be the tick values, use scale.ticks() and pass them to the first scale to convert to screen coordinates.
Now pass those values to scale.invert() for the second axis scale. This will give you the values in the domain of the second scale.
Pass those values to .tickValues() of the second axis.
I'd like to add vertical span areas on a jqplot by defining for each one the x axis range. Is there an easy and straightforward way to do this ?
I tried setting an overlay with x value set as the centre of the vertical area I want to cover and the linewidth set as the whole x range for the vertical band. The issue is that the linewidth value is encoded in pixel and not in units of xAxis.
Any help will be greatly appreciated.
Please see canvasOverlay on jqplot documentation here and some examples here
You must be able - thanks to them - to display what you need
How can you rescale the range of the axis without changing what's on the plot itself? So I would like to keep the plot, but changing the values on the axis... Thanks for your help!
In the specific case you mention in the comments: instead of using something like
imagesc(X)
use
x = linspace(0,1,size(X,1));
y = linspace(0,1,size(X,2));
imagesc(x,y,X)
This changes the axis scale, and the axis labels are set correspondingly.
In general, to change tick labels of axes, use
set(gca,'xtick',[10 20]) %// values where you want the labels placed
set(gca,'xticklabel',{'label1','label2'}) %// desired labels