D3 adding interval on X axis - javascript

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 :(

Related

d3js Star Chart - responsive legend

I am working on a d3.js chart - This current model creates a legend segment as a g element. I'd like to ensure the legend stacks below if there is not enough room in the container.
//desktop - ample space
//mobile - not enough space
I've cleaned up the legend part -- you able to clean up the code base and add some more comments here. One of the old features I had - is if there wasn't enough room in the chart the legend stacks underneath - like responsive design - I used to create 2 svg parts but apparently with d3 it should only be 1 svg - http://jsfiddle.net/h066yn5u/13/
see if the chart can be more dynamic with different sizes - I think I had to add a padding of 10 to the radius to give it a little gap between the edges.. maybe though its a case of adding a transform on the svg itself to add that padding
var arcchart = chart.append("g")
.attr("class", "starchart")
.attr("transform", "translate("+(r+10)+"," + h / 2 + ")");
var legend = chart.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + ((r + 10) * 2) + "," + (h / 4) + ")");
a version where it splits the chart into two svgs
http://jsfiddle.net/h066yn5u/14/
There are multiple ways to solve this issue.
Split into 2 svg containers: d3.js is not bound to just one svg container. You can split up the legend and the chart into 2 seperate svg containers and let the HTML handle the flow of the page
Use foreignObject: If you don't want to do that. You can try to use tag. Remember, that this is not supported by ie11 (and edge either afaik)
Calculate everything by hand: calculate the width of your legend (and including text), the width of the chart and get the available width for your whole container. If the whole container width is too small, push the legend below and of course adjust the svg height and width accordingly.

How can I implement 2 x axis in D3 version 4

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

redrawing axis in d3.js

I am implementing parallel coordinates chart dragging using d3.js
I draw my x-axis with the following code
var xAxis = d3.svg.axis().orient("bottom").scale(xScale);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + 0 + " ," + Y_SCALE + ")").call(xAxis);
When I drag one of the x-axis, I can re-draw x-axis using the same code in the "on("dragend"...) event, but I don't know how to hide the previous one.
Can you please let me know how to hide the previous x-axis or do something more intelligent?

Chart bars not aligning with x axis values in d3.js

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)

Scaling the Y-axis above X-axis

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.

Categories