Custom colorScale for LineChart about react-d3-components HOT 18 CLOSED

It can be fixed very easily:

from react-d3-components.

I also need support for stroke-dasharray attribute. Preferably, when it is a function, it will be called upon the data and the return value will become the value of stroke-dasharray attribute.

from react-d3-components.

Yeah I will change that! It's probably a good idea to move some stuff into the style attribute. Thanks for the suggestion.

from react-d3-components.

It will take some days though. If you need it urgently maybe you could send a pullreq, in case you already have an idea of how to implement it.

from react-d3-components.

My hotfix for custom stroke color will raise a warning in browser. Not sure how to suppress that. And there are many other places where you use stroke as an attribute. I suppose we (you) need to make the same changes to them as well.

I added stroke-dasharray support for LineChart.

But this is only a specific case of two more general issues:

1. Adding support for stroke-dasharray attribute for other components as well.
2. Letting attributes accept functions (data -> attribute_value mappings) as well.

And neither of them seems to be a trivial task.

from react-d3-components.

The graph looks cool :)
Do you mind if, in the future, I include it in the Readme?

But back to topic...
What warning are you getting?

Anyway I agree with both your points and I will think about how to implement them as soon as I can :)
Would be good to have support for all the SVG attributes here: http://facebook.github.io/react/docs/tags-and-attributes.html

from react-d3-components.

I certainly don't mind about the graph but my company probably does :(

The warning is something like "stroke is a MUST-HAVE attribute you stupid-ass". It is generated by react.js. I switched to production version of react to suppress it along with many other "missing key" warnings.

from react-d3-components.

Ok don't worry, will not use :)
The missing key warnings should be fixed since today 0.4.4.
I will try around with the stroke attribute. A warning is annoying but since we will set it via style maybe we can ignore it.

from react-d3-components.

@felixhao28 I tested the stroke prop (not via style) with rgb(0,0,255) and #0000FF and both worked flawlessly in Chrome, Firefox and Safari.
Did it actually not work for you in some case or you just refer to the webpage in your first post?

I will add the stroke-dasharray prop today :)

from react-d3-components.

Oh I just checked and found my css has been setting the stroke in style. No wonder it does not work!

from react-d3-components.

Hehe ok, thanks for checking.

from react-d3-components.

Thanks for so actively updating this library.

from react-d3-components.

No problem! I would like to do more but work is in the way ;)

BTW are you planning to use animations? If so I would like your feedback soon :)

from react-d3-components.

Not yet. What kind of animation are we talking about?

from react-d3-components.

Like barcharts fading in, growing from bottom to top or a real time chart moving from right to left.
I pushed a test to feature/transition branch, if u want to check out the example.

from react-d3-components.

I added strokeWidth, strokeLinecap and strokeDasharray to LineChart. It's described in the readme under 'customization'. You can supply functions that get passed the label of line.
That is what you needed right? I also uploaded a new version of the example. The one LineChart should show different stroke styles.

from react-d3-components.

Great, exactly what I was hoping for! A big thank you!

from react-d3-components.

As for the animation, I may want to use on LineChart. In my case, user has the option to hide/show a new set of lines and to highlight one set (by changing strokedash-array). If animation effects can be applied to the transitions, I would like to try.

from react-d3-components.