for this example http://jsfiddle.net/5D5eD/8/. How to increase the Y-axis above X-axis also ?
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis)
what change should I make in this line .attr('transform', 'translate(0,0)') ?
In order to do this, you need to run the code for plotting the chart again (minus the line plotting part) on another g element that has been translated. In order to do this, it's easiest to wrap the part that draws the graph in a function and call that twice.
Complete demo here.
Related
I'm trying to implement two x axis (Major and minor axis) using D3.
I already have both of them been displayed, but my second axis is not displayng the domain properly.
Here's the code on codepen: http://codepen.io/wendelcosta/pen/QpzzgJ
g.append("g")
.attr("class", "axis axis--x2")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x2));
I need to display the days for the months as minor ticks in between the major ticks (Months), it should looks like the following image.
Click Here for Image Preview
You should use two time scales for the x axis.
In the "day" axis, you can set the axis generator using d3.timeDay:
call(d3.axisBottom(x2)
.ticks(d3.timeDay.every(6))
.tickFormat(d => d3.timeFormat("%d")(d)));
And in the "month" axis, you increase the tick size:
call(d3.axisBottom(x)
.tickSizeInner(20)
.tickFormat(d3.timeFormat("%b %y")));
Here is your updated codepen: http://codepen.io/anon/pen/bqOPRg?editors=0010
I'm printing just one on every 6 days, still the "day" axis is terribly crowded. Now it's up to you reducing the text size or reducing the number of ticks.
EDIT: Since OP asked in the comments to show only values present in the data array, here is another CodePen: http://codepen.io/anon/pen/qrvdWq?editors=0010
Trying to get intervals on the X axis. The X axis should display the 1st of every month(1st Jan, 1st Feb, etc). Also looking at how to zoom in the chart to show the days (1-31 Jan). So far i've got a brush only to work as i'm still new to creating bar charts in D3.
var brush = d3.svg.brush()
.x(x)
.on('brush', bListener);
var gBrush = svg.select('g.brush').call(brush);
gBrush.selectAll('rect')
.attr('height', height - margin.top - margin.bottom)
.style("opacity", 0.5)
.style("fill", ""grey");
Looking to create something like this but as a bar chart in D3, http://www.highcharts.com/demo/line-time-series.
Here's https://jsfiddle.net/noobiecode/wck4ur9d/4/
Any help would be appreciated.
Partial answer:
How to display the 1st of every month(1st Jan, 1st Feb, etc):
In your xAxis instead of this:
.ticks(d3.time.days, 1)
do this:
.ticks(d3.time.months)
working fiddle here
Regarding brushing i didn't see any examples, may be you need to write it on your own :(
Trying to learn and implement d3.js for the first time.
In the fiddle, we needed to reduce the width of each bar from
.attr('width', xScale.rangeBand()) line 46
to
.attr('width', '10') line 50
When doing so, the horizontal x axis labels are getting dis-aligned with vertical bars which is not needed.
Tried to see a few solutions:
We're unable to see tickValues anywhere in my code.
Unable to understand where to put SVG-Text
We do not wish to hide the x axis labels
Ours is numeric, they're discussing about date time kind of axis
Any suggestions, kind folks?
Try this code:
.rangeBands([0, width], someValue)
Here's a D3? .js? puzzler I ran into over the weekend. I have a y-axis that is changing format according to the class name that is used when i set the y axis attribute on a group that I append to the the svg object. Details that might affect it are as follows:
creating the y axis object:
var y = d3.scale.ordinal()
.domain(d3.range(ydomain.length))
.rangeRoundBands([2, height],0.08);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(ydomain);
Attaching the y axis:
svg.append("g")
.attr("class", "**y-axis**")
.call(yAxis)
.append("text")
.attr("y", -17)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.style("font-size", "16px")
.attr("transform", "translate(5,0), rotate(0)")
.text("Keywords")
;
The bold "y-axis" is the part that triggers the funny behavior. If I name it as: "y axis", I get this:
BUT if I use "y-axis" as above, the formatting changes to this:
The bolded line appears rather than the axis with small tick marks. Both versions of class name "y axis","y-axis" seem to be valid, both call the yAxis object, and this is the first time in the code that these class names are used. So what's the fundamental cause of this behavior? I think there's some web dev 101 stuff I'm not getting so simple and basic explanations are much appreciated.
"y axis" is a class with associated styling that gives you the thin line with the tickmarks. "y-axis" has no such styling and is drawing your y-axis line according to some other styling property not intended for axis styling.
I'm using a line chart that's essentially a copy of the code at http://bl.ocks.org/3883245. I would like to add horizontal rules to the graph, however when I try to access the calculated tick values via yAxis.tickValues() I only get a null response. Am I going about that correctly?
tickValues is used to set custom, externally determined tick positions. So if you let the axis choose the values then this property will properly be null.
The easiest way to add grid lines is actually to add another axis! In the example you linked immediately following the lines:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
you can add the following to append a grid:
svg.append("g").attr("class", "xaxisgrid").call( xAxis.tickFormat("").tickSize(450) );
svg.select("g.xaxisgrid").selectAll(".tick")
.style('stroke', "#000")
.style('opacity', 0.4)
.filter(function(d, i){ return d3.select(this).classed('minor');} )
.style('opacity', 0.1);
svg.select("g.xaxisgrid .domain").style('fill', 'none');
The code is a bit rough, but should get you started. Basically I am slightly modifying the axis generation function(xAxis) to generate only ticks, and then I am making the ticks really long.