Placement on x-axis

[AlexPoint]

Hi,

Thanks for the good job with this library.
One thing I noticed that you probably want to know is that the data points are shifted (to the left) for most charts (actually all the charts I tried except the bar chart).
See screenshots:


Seems that points are placed to the top-left of the bars (in bar chart), whereas it should be at the top-center? Of course, the bigger the chart, the more important the shift.

[codesuki]

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?

[AlexPoint]

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)

[codesuki]

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

[codesuki]

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.

[AlexPoint]

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.

[codesuki]

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.

[brooksp]

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.

[codesuki]

Good catch!