我正在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
答案 0 :(得分:0)
将colorStroke道具传递给linchart。 colorStroke道具具有一个函数,该函数将传递标签作为参数。根据参数,您可以返回颜色。