[英]Customized chart using d3 in react native
My requirement id to draw a chart as just shown below in react native. 我的要求是绘制一张图表,如下图所示。
In my research I found d3 is the best suitable tool to create graphs. 在我的研究中,我发现d3是创建图形的最佳工具。
Dataset was added like below and its working perfectly with react native. 像下面这样添加了数据集,它与本机反应完美。
Any idea how can I make the data set colored as shown below (when it comes to different regions the color changed). 任何想法如何使数据集如下所示着色(当涉及不同区域时颜色发生变化)。
I followed the approach mentioned in the block linked by Mark. 我按照Mark所链接的块中提到的方法进行操作。
You start by changing the stroke style for the line 首先,更改线条的笔触样式
.line {
fill: none;
stroke: url(#temperature-gradient); // change here
stroke-width: 1.5px;
}
Then add the temperature-gradient
svg: 然后添加
temperature-gradient
svg:
svg.append("linearGradient")
.attr("id", "temperature-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", y(0)) // 0 as the min index
.attr("x2", 0).attr("y2", y(500)) // 500 as the max index
.selectAll("stop")
.data([
{offset: "0%", color: "red"}, // red for low index
{offset: "30%", color: "gray"}, // index 150 for grey color
{offset: "100%", color: "stealblue"} // to steal blue for index above 150
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.