d3node-linechart icon indicating copy to clipboard operation
d3node-linechart copied to clipboard

x-axis to support toISOString?

Open Joel-Mckay opened this issue 5 years ago • 1 comments

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);

Joel-Mckay avatar Jul 16 '19 18:07 Joel-Mckay

Have you had any success with this?

KD33 avatar Mar 15 '20 23:03 KD33