带有D3包装器的折线图颜色

时间:2018-07-22 22:10:25

标签: javascript reactjs d3.js

我正在react-d3-components中使用D3包装器来包装React中的color

例如,我想覆盖默认的路径颜色比例,并将图中的线全部变为红色。

文档提供以下示例,但未提及如何控制线条颜色。

如何将颜色作为道具传递给单个路径折线图?

我尝试在stroke属性中设置属性.line { stroke: #000; } ,但没有任何反应。

css

我可以使用 var dashFunc = function(label) { if (label == "somethingA") { return "4 4 4"; } if (label == "somethingB") { return "3 4 3"; } } var widthFunc = function(label) { if (label == "somethingA") { return "4"; } if (label == "somethingB") { return "2"; } } var linecapFunc = function(label) { if (label == "somethingA") { return "round"; } } React.render(<LineChart data={data} width={400} height={400} margin={{top: 10, bottom: 50, left: 50, right: 10}} tooltipHtml={tooltipLine} xAxis={{innerTickSize: 6, label: "x-label"}} yAxis={{label: "y-label"}} shapeColor={"red"} stroke={{strokeDasharray: dashFunc, strokeWidth: widthFunc, strokeLinecap: linecapFunc}} />, document.getElementById('linechart') ); 修复线条颜色,但我希望将其作为LineChart参数。

example.com -> http://www.example.com -> https://www.example.com ->  https://www.example.com/en

1 个答案:

答案 0 :(得分:0)

将colorStroke道具传递给linchart。 colorStroke道具具有一个函数,该函数将传递标签作为参数。根据参数,您可以返回颜色。