Placement on x-axis about react-d3-components HOT 8 OPEN

Wow that's very weird! Thanks for the report.
Actually had some similar bug here before and it was because of the data format / sorting.
Could you post a small part of your data and if you do the scales that you pass to the graph?

from react-d3-components.

I don't pass any scale to the graph.
Below is the code for reproducing:

var data = [
{label:"1",values:[{x:"0",y:1},{x:"1",y:1},{x:"4",y:1}},
{label:"2",values:[{x:"0",y:1},{x:"1",y:2},{x:"4",y:0}]},
{label:"null",values:[{x:"0",y:6},{x:"1",y:0},{x:"4",y:0}]}
];
return (<LineChart data={data} width={840} height={500} margin={{top: 10, bottom: 50, left: 50, right: 10}} />)

It seems that the issue happens when the "x" values are string.
Below is the graph for the same data points when "x" values are ints (works well in this case)

from react-d3-components.

Thanks for the details! Any reason you pass is in as string? Just for clarification.

from react-d3-components.

Thinking of it. If you pass a string the default scales will be ordinal and what you want is linear, which will be generated automatically if you pass numbers. So if you want to pass strings and have a linear scale you might make a scale yourself with the correct settings and pass it to the graph.

from react-d3-components.

I'm passing the values as string because they're not necessarily numbers (could be dates, numbers, strings...)
I think I should cast the values from strings to numbers when they're actually numbers since I assume that the default ordering for strings is lexicographic?
That example being apart, I will have other cases where the values will be strings. I will try passing a scale as you suggested in those cases.
Getting back to you asap to tell you if that worked.

from react-d3-components.

At the moment it's automatically decided by looking at a single data point in https://github.com/codesuki/react-d3-components/blob/master/src/DefaultScalesMixin.jsx

Supported are ordinal, numerical and date scales by default. But what you pass in yourself is not limited of course.

from react-d3-components.

The x-axis offset for ordinal scales is being caused by bar padding in _makeOrdinalXScale of DefaultScalesMixin.jsx. Bar padding defaults to 0.5, which is why it shows up correctly for bar charts but not for any other chart type. If you pass barPadding={1} as a property to charts (other than bar charts), it should fix the issue.

from react-d3-components.

Good catch!

from react-d3-components.