Javascript 分组折线图，如何在重复模式中绘制线

我想将数据可视化为一个“分组折线图”，在该图中，我的三个增长时间段被重复绘制（离散地，只有三个数据点相连，而不是一条连续的线），与分组条形图的功能非常相似。我也绕了几个圈，算是个好办法。我的数据结构如下：

var data = [
   {'fmc':'fmc1', 'values':[{'growth':12, 'period':'t1'},{'growth':7,'period':'t2'},{'growth':4, 'period':'t3'}]},
   {'fmc':'fmc2', 'values':[{'growth':15, 'period':'t1'},{'growth':8,'period':'t2'},{'growth':4, 'period':'t3'}]},
...
]

完整片段如下：

var-margins={top:20，right:20，bottom:30，left:40}，
宽度=960，
高度=500；
var totalWidth=宽度+边距。左+边距。右；
var totalHeight=高度+边距。顶部+边距。底部；
var x0=d3.scaleBand（）
.rangeRound（[0，宽度]）.padding（.1）；
var x1=d3.scaleBand（）.padding（.05）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var xAxis=d3.axisBottom（x0）
.尺寸（0）；
var yAxis=d3.轴右（y）；
var color=d3.scaleOrdinal（）
.范围（[“003366”、“366092”、“4f81b9”、“b8cce4”、“f6d18b”）；
var svg=d3。选择（'body'）。追加（“svg”）
.attr（“宽度”，总宽度）
.attr（“高度”，总高度）；
var graphGroup=svg.append（“g”）
.attr（“转换”、“转换”（+margins.left+）、“+margins.top+”）；
//var jsonData=d3.json（'11-insti-data.json'）；
//然后（函数（数据）{
变量数据=[{'fmc'：'fmc1'，
'values'：[{'growth'：19.58，'period'：'t1'}，
{'growth'：4.12，'period'：'t2'}，
{'growth'：6.09，'period'：'t3'}]}，
{'fmc'：'fmc2'，
'values'：[{'growth'：36.35，'period'：'t1'}，
{'growth'：20.9，'period'：'t2'}，
{'growth'：9.21，'period'：'t3'}]}，
{'fmc'：'fmc3'，
'values'：[{'growth'：30.69，'period'：'t1'}，
{'growth'：14.72，'period'：'t2'}，
{'growth'：5.66，'period'：'t3'}]}，
{'fmc'：'fmc4'，
'values'：[{'growth'：100.66，'period'：'t1'}，
{'growth'：58.55，'period'：'t2'}，
{'growth'：32.71，'period'：'t3'}]}，
{'fmc'：'fmc5'，
'values'：[{'growth'：27.8，'period'：'t1'}，
{'growth'：6.97，'period'：'t2'}，
{'growth'：12.55，'period'：'t3'}]}，
{'fmc'：'fmc6'，
'values'：[{'growth'：32.8，'period'：'t1'}，
{'growth'：-0.46，'period'：'t2'}，
{'growth'：11.54，'period'：'t3'}]}，
{'fmc'：'fmc7'，
'values'：[{'growth'：-3.83，'period'：'t1'}，
{'growth'：11.32，'period'：'t2'}，
{'growth'：7.9，'period'：'t3'}]}，
{'fmc'：'fmc8'，
'values'：[{'growth'：2.93，'period'：'t1'}，
{'growth'：-13.87，'period'：'t2'}，
{'growth'：2.6，'period'：'t3'}]}，
{'fmc'：'fmc9'，
'values'：[{'growth'：85.53，'period'：'t1'}，
{'growth'：42.83，'period'：'t2'}，
{'growth'：71.27，'period'：'t3'}]}，
{'fmc'：'fmc10'，
'values'：[{'growth'：44.02，'period'：'t1'}，
{'growth'：36.0，'period'：'t2'}，
{'growth'：9.76，'period'：'t3'}]}]；
var categoriesNames=data.map（函数（d）{return d.fmc；}）；
var rateNames=data[0].values.map（函数（d）{return d.period；}）；
x0.域名（分类名称）；
域名（rateNames）.rangeRound（[0，x0.bandwidth（）]）；
y、 域（[01100]）；
graphGroup.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
graphGroup.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.style（'font-weight'，'bold'）
.文本（“价值”）；
var line=d3.line（）
.x（函数（d）{返回x1（d.period）；}）
.y（函数（d）{返回y（d.growth）；}）
.曲线（d3.曲线中心）；
var slice=graphGroup.selectAll（“.slice”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“transform”，函数（d）{return”translate（“+x0（d.fmc）+”，0）”；}）；
slice.selectAll（'path'））
.data（函数（d）{返回d.values；}）
.enter（）.append（'path'）
.attr（“d”，行（数据增长））
.attr（“笔划”，“#366092”）
.attr（“笔划宽度”，3）
.attr（“填充”、“无”）；
slice.selectAll（'circle'））
.data（函数（d）{返回d.values；}）
.enter（）.append（'圆'）
.attr（'cx'，函数（d）{返回x1（d.period）}）
.style（“填充”，函数（d）{返回颜色（d.period）}）
.attr（“cy”，函数（d）{返回y（d.growth）；}）
.attr（'r'，3）；

两个小改动：

将数据包装在方括号中（即，使其成为包含另一个数组的数组），否则传递的数据将是内部对象：

您的路径“

d

属性（

line（data.growth）

）没有什么意义，您只需要将已绑定的数据传递给行生成器：

.attr("d", line)

以下是您的代码和这两个更改：

var页边距={
前20名，
右:20,，
底数：30，
左：40
},
宽度=960，
高度=500；
var totalWidth=宽度+边距.left+边距.right；
var totalHeight=高度+页边距.top+页边距.bottom；
var x0=d3.scaleBand（）
.rangeRound（[0，宽度]）.padding（.1）；
var x1=d3.scaleBand（）.padding（.05）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var xAxis=d3.axisBottom（x0）
.尺寸（0）；
var yAxis=d3.轴右（y）；
var color=d3.scaleOrdinal（）
.范围（[“003366”、“366092”、“4f81b9”、“b8cce4”、“f6d18b”）；
var svg=d3。选择（'body'）。追加（“svg”）
.attr（“宽度”，总宽度）
.attr（“高度”，总高度）；
var graphGroup=svg.append（“g”）
.attr（“转换”、“转换”（+margins.left+）、“+margins.top+”）；
//var jsonData=d3.json（'11-insti-data.json'）；
//然后（函数（数据）{
风险值数据=[{
‘fmc’：‘fmc1’，
“价值观”：[{
“增长”：19.58，
“期间”：“t1”
},
{
“增长”：4.12，
“期间”：“t2”
},
{
“增长”：6.09，
“期间”：“t3”
}
]
},
{
‘fmc’：‘fmc2’，
“价值观”：[{
“增长”：36.35，
“期间”：“t1”
},
{
“增长”：20.9，
“期间”：“t2”
},
{
“增长”：9.21，
“期间”：“t3”
}
]
},
{
‘fmc’：‘fmc3’，
'
.attr("d", line)