我的数据集如下所示：
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）中计算的长度的起点开始），并且没有重复的短划线，以便原始“预测”线的终点通过虚线的这个单一“间隙”显示。参见以下工作示例并检查备注：
第一个