我的数据集如下所示:
var data = [{
"Date": "31/12/2019",
"Value": 23,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "31/01/2020",
"Value": 49,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "29/02/2020",
"Value": 23,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "31/03/2020",
"Value": 12,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "30/04/2020",
"Value": 33,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "31/05/2020",
"Value": 62,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "30/06/2020",
"Value": 65,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "31/07/2020",
"Value": 77,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "31/08/2020",
"Value": 65,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "30/09/2020",
"Value": 58,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "31/10/2020",
"Value": 87,
"Type": "Actual",
"Plan": 100,
"Over": ""
},
{
"Date": "30/11/2020",
"Value": 120,
"Type": "Actual",
"Plan": 100,
"Over": "Y"
},
{
"Date": "31/12/2020",
"Value": 103,
"Type": "Fcst",
"Plan": 100,
"Over": "Y"
},
{
"Date": "31/01/2021",
"Value": 110,
"Type": "Fcst",
"Plan": 100,
"Over": "Y"
},
{
"Date": "28/02/2021",
"Value": 117,
"Type": "Fcst",
"Plan": 100,
"Over": "Y"
}
]
我正在尝试绘制具有下列格式的折线图:
当d.Type === "Actual"
时,则将线显示为实心和蓝色
当d.Type === "Fcst"
时,将线显示为虚线(stroke-dasharray
)和绿色
这就是我想要达到的目标:
......这是我目前所拥有的:
下面是我尝试添加条件格式所做的工作:
//add Trend Line
svg.append('path')
.datum(data)
.attr('class', 'data-line glowed')
.style('stroke', function(d, i) {
if (d.Type == "Fcst")
return "#00D4B2"
else {
return "#3087CD"
}
})
.style('stroke-width', 2)
.style("stroke-dasharray",function(d, i) {
if (d.Type == "Fcst")
return ("3, 1"); else {
return ("0, 0")
}
})
.style('fill', 'none')
.attr('d', line)
这是我的JSFIDDLE
1条答案
按热度按时间6qftjkof1#
因为使用了
datum
,所以不会遍历行中的每个点--相反,整个路径由line
生成,并且是一个元素,只能接受一组样式。下面的方法绘制了3条相互重叠的线(一条透明)。较短的“实际”线在“预测”线的上面。你需要这样做来获得漂亮的曲率(我使用
d3.curveMonotoneX
)。步骤:
1.为“实际”数据绘制线条(根据
Type
上的过滤器),但使其透明1.使用
getTotalLength()
计算步骤(1)中此“实际”线的长度1.绘制“预测”线的全长(例如绿色)
1.再次绘制“实际”线,这次为蓝色,并设置
stroke-dasharray
,使其具有一个短划线(从步骤(2)中计算的长度的起点开始),并且没有重复的短划线,以便原始“预测”线的终点通过虚线的这个单一“间隙”显示。参见以下工作示例并检查备注:
第一个