Javascript 有没有办法根据用户对单选按钮的输入更改D3图例？

我的目标是创建一个显示数据驱动图例和单选按钮的网页。我希望用户选择单选按钮来更改图例

复杂的因素是图例依赖于嵌套函数，我不知道如何使嵌套函数的“键”响应单选按钮

以下是我迄今为止采取的步骤：

• 创建图例（嵌套数据，然后将嵌套关键点附着到矩形）
• 单击单选按钮，让d3选择DOM中的所有矩形
• 将单选按钮的选择发送到名为

  updateKey

  的函数，该函数包含nest变量。用单选按钮选择替换嵌套的

  d.key

  部分
• 将矩形的填充属性更改为

  color（d.key）

我的问题是，nest变量在

updateKey

函数中似乎没有变化，尽管我对全局变量的研究表明它发生了变化

代码如下：

var doc=URL.createObjectURL（新Blob（[`Passed Category Owner Dup
是的，海莉，是的
是的，海莉，是的
是的Hailey医生是的
是的罗伯特医生是的
是的，拉奎拉是的
不，海莉，是的
`]));
d3.tsv（文件）
.世界其他地区（功能（d）{
返回{
通过：d.通过，
类别：d.类别，
所有者：d.所有者，
Dup:d.Dup
};
})
.get（函数（错误、数据）{
var svg=d3.选择（“图表”）.追加（“svg”）
.附加（“g”）；
//创建应用颜色的功能
var cat20=d3.schemecategory 20
var colors=d3.scaleOrdinal（）
.领域（功能（d）{
返回嵌套（d.key）；
})
.射程（cat20）；
//选择一列数据并根据该列嵌套
nest=d3.nest（）
.键（功能（d）{
返回d.类别
})
.排序键（d3.降序）
.条目（数据）
变量图例=d3。选择（“图例”）
//创造传奇
.append（“svg”）
.attr（“类”、“图例”）
.全选（“g”）
.数据（d3.范围（20））
.输入（）
.附加（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*25+”）；
});
//将图例做成正方形
图例。追加（“rect”）
.数据（嵌套）
.attr（“类”、“rect”）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，功能（d）{
返回颜色（d键）
})
.样式（“笔划”、“灰色”）；
//制作图例文本
图例。追加（“文本”）
.数据（嵌套）
.attr（“x”，24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回d.key；
});
函数更新键（h）{
var nest=d3.nest（）
.键（功能（d）{
返回（h）
})
.排序键（d3.降序）
.条目（数据）
}
d3.选择全部（（“输入[name='stack']））。打开（“更改”，函数（d）{
var colVar=this.value；
if（colVar=='Category'）{
d3.选择全部（“.rect”）.样式（“填充”，函数（d）{
updateKey（“d[''+colVar+']”）
返回颜色（d键）
})
}
})
})

我认为您的问题在于对

nest

函数的混淆，并且您的

nest

变量不是对该函数的引用，而是您的数据

这就是说，我发现您的代码过于混乱，没有说明应该如何使用

d3

数据绑定功能。下面是我评论过的重构工作示例：

已通过

类别

所有者



var doc=URL.createObjectURL(
新斑点([
`已通过、类别、所有者、Dup
是的，味精，海莉，是的
是的，味精，海莉，是的
是的，医生，海莉，是的
是的，医生，罗伯特，是的
是的，味精，拉奎拉，是的
不，电子表格，海莉，是的，
])
);
//stacksnippet编辑器必须切换到csv
d3.csv（文档）
.世界其他地区（功能（d）{
返回{
通过：d.通过，
类别：d.类别，
所有者：d.所有者，
杜普：d.杜普，
};
})
.get（函数（错误、数据）{
//图例容器
变量图例=d3
.选择（“#图例”）
//创造传奇
.append（'svg'）
.attr（“类”、“图例”）；
//初抽
图纸图例（“类别”）；
//用于重新绘制图例的函数
//根据d3进入、更新、退出
函数绘图图例（当前选择）{
//为新选择应用嵌套函数
设nestedData=d3
.nest（）
.排序键（d3.降序）
.键（功能（d）{
返回d[当前选择]；
}).条目（数据）；
//更新选择
let lu=传奇
.selectAll（'g'）
//这里的关键功能很重要
//这样d3就可以计算进入，更新，退出
.数据（嵌套数据，d=>d.key）；
//退出选择
lu.exit（）.remove（）；
//输入所选内容
//添加容器g
le=lu
.输入（）
.append（'g'）
.attr（'transform'，函数（d，i）{
返回“translate（0，+i*25+）”；
});
//输入addrect
le.append（'rect'）
.attr（'class'，'rect'）
.attr（'width'，18）
.attr（'height'，18）
.样式（“填充”，功能（d，i）{
返回d3.schemeCategory20[i]；
})
.风格（“笔画”、“灰色”）；
//在输入时添加文本
le.append（'text'）
.attr（'x'，24）
.attr（'y'，9）
.attr（'dy'，'.35em'）；
//输入+更新