I want to align the axis label for X axis and Yaxis in NVD3.js. I have attached a fiddle link. For example, I want the X axis label 'Time (ms)' to move closely to X-axis from its current position. Please advise on achieving this and also please let me know if there are any options to align.
jsfiddle.net/balajipalamadai/d2Dj6/4
In order to do this you'll need to select the axis text and change x, y, dx, dy, text-anchor attributes accordingly, for example:
d3.select(".nv-axislabel")
.attr("dy", -5)
Demo example is here.
Related
I have a plunker here - https://plnkr.co/edit/3gikXOR8EydIcA3wcBMb?p=preview
The numbers on the y axis are in the centre of the grid line.
I can change the padding with
.tickPadding(5)
Can I change the vertical position of the numbers so they bottom of the number is on the same level as the grid line.
add a dy attribute to the text items
chart.append("g")
.classed('y-axis', true)
.call(y_axis)
.selectAll('text')
.attr('dy', '-0.3em');
Right now, I use d3.time.scale to generate xAxis ticks, but what I want is make sure the both ends of axis have labels rather than using the D3 axis auto-generated tick label arrangement. I wonder how to do that?
My code:
var ts = d3.time.scale().domain(d3.extent(data.map(function(d){return d.date;})));
var xAxis = d3.svg.axis().orient("bottom");
xAxis.scale(ts).tickFormat(d3.time.format("%Y-%m")).ticks(5);
svg.append("g")
.classed("xAxis", true)
.call(xAxis);
The problem is the axis generated in this way cannot be controlled to decide where the tick labels are arranged. I want to make sure there are always label on both ends of the axis.
I am a newbie to jqPlot and I am currently using it to generate charts
so I need you helps for some questions following please
I would like to do a chart like this http://picturepush.com/public/11972209
but I don't want show the min and max values de axis X (min = 99, max = 106).
(NOTHING ELSE CHANGES!)
how could I fix the *W*idth and *H*eigh of the 'rectangle' of chart?
(independently with the label ticks, axis label, legend ...)
how could I set the position of xaxis, yaxis label?
thanks a lot
About your questions :
You can set the ticks you want using ticks options : http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.ticks
Here is a related question I asked some months ago : JqPlot : Set a fix height value for the graph area not including y axe labels
You should have a look here : http://www.jqplot.com/docs/files/jqplot-axisTickRenderer-js.html#
I have a zoomable area plot done in D3, which works well. Now I am trying to add a rectangle to the specified location along x-axis in the middle of the plot. However, I can't seem to figure out how to do that. "rect" element is specified using absolute (x,y) of the plot and so when using zooms it stays in the same position.
So I was wondering if there is a way to tie "rect" to the axis when plotting, so that it benefits from all the zoom and translate behaviour or do I need to manually edit the x,y,width and length of the rectangle according to translation as well as figuring out where the corresponding x and y coordinates are on the graph? I am trying to use "rect" because it seems the most flexible element to use.
Thanks
Alex
I'm not sure how you are doing the zooming, but I am guessing you are changing the parameters of the scales you use with your axis? You should be able to use the same scales to place your rectangle.
If you are starting with plot coordinates then maybe using the invert function on the scale will help (available at least for quantitive scales), e.g. https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_invert
You should be able to take initial plot coordinates and invert them to determine data coordinates that can then move with changes in the scale.
If the scale is linear you can probably invert the length and width too, but you will have to compute offsets if your domain does not include 0. Easiest is to compute the rectangle's end points, something like:
var dataX0 = xScale.invert(rect.x);
var dataX1 = xScale.invert(rect.x + rect.width);
var dataWidth = dataX1 - dataX0;
If you have the data in axes coordinates already you should be able to do something like:
var rectData = [{x: 'April 1, 1999', y: 10000, width: 100, height:100}];
svg.selectAll('rect.boxy')
.data(rectData)
.enter().append('rect').classed('boxy', true)
.style('fill','black');
svg.selectAll('rect.boxy')
.attr('x', function(d) { return x(new Date(d.x));} )
.attr('y', function(d) { return y(d.y);})
.attr('width', function(d) { return d.width;} )
.attr('height', function(d) { return d.height;} );
Based on the example you shared where x and y (as functions) are the scales the axes are based on.
Is there a straightforward way to add a second Y-axis to a chart model? I see that the linePlusBar chart has this feature (via y1Axis y2Axis and forceY) but is there a simple way to add it to other models? I would like to use it for the lineChart or the scatter models.
Same X axis, different Y value need double Y axis. You could try this:
plot(x,y1......,axes=F)
axis(2,....) # build the left Y axis
par(new=T) # means that the next chart will be draw on the picture you draw above
plot(x,y2......,axes=F)
axis(4,....) # build the right Y axis