Reactjs 如何在d3中的每一行中使用虚线段制作多行图表

数据如下所示：

var data = [
  {
    name: 'USA',
    values: [
      { date: '2000', price: '100', isDashed:true },
      { date: '2001', price: '110', isDashed:true },
      { date: '2002', price: '145', isDashed:false },...
      ,
  {
    name: 'Canada',
    values: [
      { date: '2000', price: '200',isDashed:true  },
      { date: '2001', price: '120',isDashed:true  },
      { date: '2002', price: '33',isDashed:true  }...
    ]
  }
]

我正在关注这个链接

问题是，在我的数据中，如果有一个标志是灰色的，那么当它为真时，我需要在图表中使用一个虚线段，就像这样（例如）。

var数据=[{
名称：“美国”，
价值观：[{
日期：“2000年”，
价格：“100”，
r:1
},
{
日期：“2001年”，
价格：“110”，
r:1
},
{
日期：“2002年”，
价格：“145”
},
{
日期：“2003年”，
价格：“241”
},
{
日期：“2004年”，
价格：“101”
},
{
日期：“2005年”，
价格：“90”
},
{
日期：“2006年”，
价格：“10”
},
{
日期：“2007年”，
价格：“35”
},
{
日期：“2008年”，
价格：“21”
},
{
日期：“2009年”，
价格：“201”
}
]
},
{
名称：“加拿大”，
价值观：[{
日期：“2000年”，
价格：“200”
},
{
日期：“2001年”，
价格：“120”
},
{
日期：“2002年”，
价格：“33”
},
{
日期：“2003年”，
价格：“21”
},
{
日期：“2004年”，
价格：“51”
},
{
日期：“2005年”，
价格：“190”
},
{
日期：“2006年”，
价格：“120”
},
{
日期：“2007年”，
价格：“85”
},
{
日期：“2008年”，
价格：“221”
},
{
日期：“2009年”，
价格：“101”
}
]
},
{
名称：“Maxico”，
价值观：[{
日期：“2000年”，
价格：“50”
},
{
日期：“2001年”，
价格：“10”
},
{
日期：“2002年”，
价格：“5”
},
{
日期：“2003年”，
价格：“71”
},
{
日期：“2004年”，
价格：“20”
},
{
日期：“2005年”，
价格：“9”
},
{
日期：“2006年”，
价格：“220”
},
{
日期：“2007年”，
价格：“235”
},
{
日期：“2008年”，
价格：“61”
},
{
日期：“2009年”，
价格：“10”
}
]
}
];
var宽度=500；
var高度=300；
var保证金=50；
var持续时间=250；
var lineOpacity=“0.25”；
var lineOpacityHover=“0.85”；
var otherLinesOpacityHover=“0.1”；
var lineStroke=“1.5px”；
var linestrokehaver=“2.5px”；
var circleOpacity=“0.85”；
var circleOpacityOnLineHover=“0.25”；
循环变异系数=3；
var circleRadiusHover=6；
/*格式数据*/
var parseDate=d3.timeParse（“%Y”）；
data.forEach（函数（d）{
d、 值。forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 价格=+d.价格；
d、 r=+d.r；
});
});
/*鳞片*/
var xScale=d3
.scaleTime（）
.domain（d3.extent（数据[0]。值，（d）=>d.date））
.范围（[0，宽度-边距]）；
var yScale=d3
.scaleLinear（）
.domain（[0，d3.max（数据[0]。值，（d）=>d.price）]）
.范围（[高度-裕度，0]）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
/*添加SVG*/
var svg=d3
.选择（“图表”）
.append（“svg”）
.attr（“宽度”，宽度+边距+像素”）
.attr（“高度”，高度+边距+像素”）
.附加（“g”）
.attr（“transform”，`translate（${margin}，${margin}）`）；
/*将行添加到SVG中*/
var线=d3
.第（）行
.x（（d）=>xScale（d.date））
.y（（d）=>yScale（d.price））；
让line=svg.append（“g”）.attr（“class”，“line”）；
线
.selectAll（“行组”）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“类别”、“行组”）
.on（“鼠标悬停”，功能（d，i）{
svg
.append（“文本”）
.attr（“类”、“标题文本”）
.样式（“填充”，颜色（i））
.文本（d.名称）
.attr（“文本锚定”、“中间”）
.attr（“x”，（宽度-边距）/2）
.attr（“y”，5）
.attr（“r”，5）；
})
.开启（“鼠标出”，功能（d）{
选择（“.title text”）.remove（）；
})
.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，（d）=>行（d.values））
.style（“笔划”（d，i）=>颜色（i））
.style（“不透明度”，线条不透明度）
.on（“鼠标悬停”，功能（d）{
d3.选择全部（“.line”）.style（“不透明度”，其他行的acityhover）；
d3.选择All（“.circle”）.style（“不透明”，CircleOpacityOnline悬停）；
d3.选择（本）
.style（“不透明度”，lineOpacityHover）
.style（“笔划宽度”，线条笔划悬停）
.样式（“光标”、“指针”）；
})
.开启（“鼠标出”，功能（d）{
d3.选择全部（“.line”）.style（“不透明度”，lineOpacity）；
d3.选择全部（“.circle”）.样式（“不透明度”，circleOpacity）；
d3.选择（本）
.style（“笔划宽度”，线条笔划）
.样式（“光标”、“无”）；
});
/*在行中添加圆*/
线
.selectAll（“圆圈组”）
.数据（数据）
.输入（）
.附加（“g”）
.style（“填充”（d，i）=>颜色（i））
.selectAll（“圆圈”）
.数据（（d）=>d.值）
.输入（）
.附加（“g”）
.attr（“类”、“圈”）
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.style（“光标”、“指针”）
.append（“文本”）
.attr（“类”、“文本”）
.text（`${d.price}`）
.attr（“x”，“d）=>xScale（d.date）+5）
.attr（“y”，d）=>yScale（d.price）-10；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.style（“光标”、“无”）
.transition（）
.持续时间（持续时间）
.selectAll（“.text”）
.remove（）；
})
.附加（“圆圈”）
.attr（“cx”，d）=>xScale（d.date））
.attr（“cy”，（d）=>yScale（d.price））
.attr（“r”，circleRadius）
.style（“不透明度”，circleOpacity）
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.transition（）
.持续时间（持续时间）
.attr（“r”，circleRadiusHover）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（this）.transition（）.duration（duration）.attr（“r”，circleRadius）；
});
/*将Axis添加到SVG中*/
var xAxis=d3.axisBottom（xScale）.ticks（5）；
var yAxis=d3.axisLeft（yScale）.ticks（5）；
svg
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“transform”，`translate（0，${height-margin}）`）
.呼叫（xAxis）；
svg
.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
阿佩先生