d3node-linechart
d3node-linechart copied to clipboard
x-axis to support toISOString?
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: https://github.com/d3-node/d3node-linechart/issues/4#event-1287442844
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);
Have you had any success with this?