Javascript 图例切换中的d3错误--未捕获的DomeException:未能执行'；查询选择器'；在'；文件'；：

我正在尝试为我的折线图启用图例切换，在尝试切换“通用汽车卡车公司”时，我遇到了一个d3错误

错误：“未捕获的DomeException:未能在“文档”上执行“querySelector”：“line_General Motors Truck Company（GMC）”不是有效的选择器。”

我想这是因为传说中的“（）”字，不过我不确定。有人知道我怎么解决这个问题吗

下面是一个JSFIDLE：

还有代码段：

var数据=[{
“品牌”：“丰田”，
“计数”：1800，
“时间”：“2017-04-02 16”
}, {
“品牌”：“丰田”，
“伯爵”：1172，
“时间”：“2017-04-02 17”
}, {
“品牌”：“丰田”，
“计数”：2000，
“时间”：“2017-04-02 18”
}, {
“品牌”：“通用汽车卡车公司（GMC）”，
“计数”：8765，
“时间”：“2017-04-02 16”
}, {
“品牌”：“通用汽车卡车公司（GMC）”，
“计数”：3445，
“时间”：“2017-04-02 17”
}, {
“品牌”：“通用汽车卡车公司（GMC）”，
“计数”：1232，
“时间”：“2017-04-02 18”
}];
data.forEach（函数（d）{
d、 时间=d3.timeParse（“%Y-%m-%d%H”）（d.Time）
});
var dataGroup=d3.nest（）//按品牌对数据进行分组的d3方法
.键（功能（d）{
回归d.品牌；
})
.条目（数据）；
//var color=d3.scale.category10（）；
var vis=d3。选择（“可视化”），
宽度=1000，
高度=500，
边距={
前50名，
右:20,，
底数：50，
左：50
},
xScale=d3.scaleTime（）.range（[MARGINS.left，WIDTH-MARGINS.right]）.domain（[d3.min（数据，函数（d）{//根据数据设置x轴
返回d.时间；
})，d3.max（数据，函数（d）{
返回d.时间；
})]),
yScale=d3.scaleLinear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[d3.min（数据，函数（d）{//根据数据设置y轴
返回d.计数；
})，d3.max（数据，函数（d）{
返回d.计数；
})]),
xAxis=d3.axisBottom（）
.刻度（xScale），
yAxis=d3.axisLeft（）
.刻度（yScale）
vis.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
vis.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（MARGINS.left）+“，0）”）
.呼叫（yAxis）；
var lineGen=d3.line（）
.x（功能（d）{
返回xScale（d.Time）；
})
.y（功能（d）{
返回Y刻度（d计数）；
})
.曲线（d3.曲线基）；
forEach（函数（d，i）{//迭代数据组并为每个品牌创建线图
vis.append（'svg:path'）
.attr（'d'，lineGen（d.values））
.attr（'stroke'，函数（d，j）{
返回“hsl（“+Math.random（）*360+”，100%，50%）；//图形上每个品牌线的随机颜色
})
.attr（'stroke-width'，2）
.attr（'id'，'line_'+d.key）
.attr（'fill'，'none'）；
lSpace=WIDTH/dataGroup.length；//根据品牌数量定义图例空间
vis.append（“文本”）
.attr（“x”，（lSpace/2）+i*lSpace）
.attr（“y”，高度）
.样式（“填充”、“黑色”）
.attr（“类”、“图例”）
.on（'单击'，函数（））{
var active=d.active？假：真；
var不透明度=有效？0:1；
d3.选择（“#线“+d.键）。样式（“不透明度”，不透明度）；
d、 主动=主动；
})
.文本（d.key）；
});
。轴路径{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：Lato；
字体大小：13px；
}
.传奇{
字体大小：14px；
字体大小：粗体；
光标：指针；
D3测试

我想这是因为传说中的“（）”字，不过我不确定

是的，但不仅如此：您还不应该在CSS选择器中使用空格

因此，一个简单的解决方案是在设置ID时删除它们：

.attr('id', 'line_' + d.key.replace(/[ )(]/g,''))

当然，在选择以下各项时：

d3.select("#line_" + d.key.replace(/[ )(]/g,''))

以下是您的更新代码：


var数据=[{
“品牌”：“丰田”，
“计数”：1800，
“时间”：“2017-04-02 16”
}, {
“品牌”：“丰田”，
“伯爵”：1172，
“时间”：“2017-04-02 17”
}, {
“品牌”：“丰田”，
“计数”：2000，
“时间”：“2017-04-02 18”
}, {
“品牌”：“通用汽车卡车公司（GMC）”，
“计数”：8765，
“时间”：“2017-04-02 16”
}, {
“品牌”：“通用汽车卡车公司（GMC）”，
“计数”：3445，
“时间”：“2017-04-02 17”
}, {
“品牌”：“通用汽车卡车公司（GMC）”，
“计数”：1232，
“时间”：“2017-04-02 18”
}];
data.forEach（函数（d）{
d、 时间=d3.timeParse（“%Y-%m-%d%H”）（d.Time）
});
var dataGroup=d3.nest（）//按品牌对数据进行分组的d3方法
.键（功能（d）{
回归d.品牌；
})
.条目（数据）；
//var color=d3.scale.category10（）；
var vis=d3。选择（“可视化”），
宽度=1000，
高度=500，
边距={
前50名，
右:20,，
底数：50，
左：50
},
xScale=d3.scaleTime（）.range（[MARGINS.left，WIDTH-MARGINS.right]）.domain（[d3.min（数据，函数（d）{//根据数据设置x轴
返回d.时间；
})，d3.max（数据，函数（d）{
返回d.时间；
})]),
yScale=d3.scaleLinear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[d3.min（数据，函数（d）{//根据数据设置y轴
返回d.计数；
})，d3.max（数据，函数（d）{
返回d.计数；
})]),
xAxis=d3.axisBottom（）
.刻度（xScale），
yAxis=d3.axisLeft（）
.刻度（yScale）
vis.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
vis.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（MARGINS.left）+“，0）”）
.呼叫（yAxis）；
var lineGen=d3.line（）
.x（功能（d）{
返回xScale（d.Time）；
})
.y（功能（d）{
返回Y刻度（d计数）；
})
.曲线（d3.曲线基）；
forEach（函数（d，i）{//迭代数据组并为每个品牌创建线图
vis.append（'svg:path'）
.attr（'d'，lineGen（d.values））
.attr（'stroke'，函数（d，j）{
返回“hsl（“+Math.random（）*360+”，100%，50%）；//屏幕上每个品牌行的随机颜色