x-axis to support toISOString? #9
Description
Thanks for publishing a simple d3 example, as I have been doing a project that can benefit from server side chart rendering.
I was looking at the library source, and as I am new to d3 it seemed one had to setup the d3.timeParse to get proper date support on the x-axis.
While I can generate string labels instead, in seems to lib only accepts numeric key types.
I wanted to add labels with:
moment(myUTCTime).toISOString()
Would you recommend I use this method instead?
https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218
Cheers,
J
I saw your advice to others:
#4 (comment)
And was able to rotate the labels, but it is unclear how d3 needs to be setup to parse date+Times.
That patched area of index.js I made was in:
const lineChart = d3.line()
.x(d => xScale(d.key)) //I assumed your advice to patch is here, but it was unclear how it renders the labels
.y(d => yScale(d.value));
if (_isCurve) lineChart.curve(d3.curveBasis);
// g.append('g')
// .attr('transform', translate(0, ${height}))
// .call(xAxis);
//add the x Axis with a -65deg rotation to reduce marker label overlap
svg.append("g")
.attr("class", "x axis")
.attr('transform', translate(0,${height}))
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
g.append('g').call(yAxis);
g.append('g')
.attr('fill', 'none')
.attr('stroke-width', _lineWidth)
.selectAll('path')
.data(allKeys ? data : [data])
.enter().append("path")
.attr('stroke', (d, i) => i < _lineColors.length ? _lineColors[i] : _lineColor)
.attr('d', lineChart);