Javascript D3.js：基于变量输入更新条形图

我是D3.js新手，在理解如何根据HTML输入过滤出图形时遇到了一些困难。我的CSV如下：

word3,value,channel,person
focused,2,cnnnews18,modi
hailed,2,cnnnews18,modi
improved,2,cnnnews18,modi
wins,4,ndtv,modi
welcomed,2,ndtv,modi
praise,3,republic,modi
celebrates,3,republic,modi

由于我想通过变量

通道

对其进行过滤，因此在读取CSV后，我编写了以下函数：

//例如，通过“cnn”进行过滤
data=data.filter（函数（d）{
返回d.channel==“cnn”；
}); 

但是我希望这个过滤是由用户而不是我来完成的。因此，我设置了带有ID的按钮，其中包含的通道名称是变量。HTML:

 <div id="my_dataviz"> 
         <button id="republic">Republic</button>
         <button id="ndtv">NDTV</button></div>
      </div>
  

draw（this.id）执行draw函数，该函数包含有关如何绘制图形的信息。现在我的理解是，我将在
draw（channel）
中包装读取数据和绘制图形的整个代码部分，其中
channel
将取决于单击的按钮。这是我现在拥有的代码：

var margin={top:10，right:0，bottom:0，left:0}，
宽度=400-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var svg=d3.选择（“#我的数据viz”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）；
变量y=d3.scaleBand（）
.rangeRound（[高度，0]）
.填充（0.2）；
d3.csv（“https://raw.githubusercontent.com/thedivtagguy/files/main/sent_modi.csv，类型，函数（错误，数据）{
如果（错误）抛出错误；
数据排序（函数（a，b）{
返回b.value-a.value；
});
d3.选择全部（“按钮”）。在（“单击”上，函数（）{
绘制（this.id）；
});
绘制（“ndtv”）；
功能图（myChannel）{
data=data.filter（函数（d）{返回d.channel==myChannel；
})
x、 域（d3.extent（数据，函数（d）{返回d.value；}））；
y、 域（data.map（函数（d）{returnd.word3；}））；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回d.value<0？x（d.value）：x（0）；}）
.attr（“宽度”，函数（d）{返回d.value<0？x（d.value*-1）-x（0）：x（d.value）-x（0）；}）
.attr（“y”，函数（d）{返回y（d.word3）；}）
.attr（“高度”，y.带宽（））
.attr（“fill”，函数（d）{返回d.value<0？#d7191c:“#1a9641”；}）；
svg.selectAll（“.value”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类”、“值”）
.attr（“x”，函数（d）{
如果（d.值<0）{
返回（x（d.value*-1）-x（0））>20？x（d.value）+2:x（d.value）-1；
}否则{
返回（x（d.value）-x（0））>20？x（d.value）-2:x（d.value）+1；
}
})
.attr（“y”，函数（d）{返回y（d.word3）；}）
.attr（“dy”，y.带宽（）-2.55）
.attr（“文本锚定”，函数（d）{
如果（d.值<0）{
返回（x（d.value*-1）-x（0））>20？“开始”：“结束”；
}否则{
返回（x（d.value）-x（0））>20？“结束”：“开始”；
}
})
.样式（“填充”，功能（d）{
如果（d.值<0）{
返回值（x（d.value*-1）-x（0））>20？”#fff:“#3a403d”；
}否则{
返回值（x（d.value）-x（0））>20？”#fff:“#3a403d”；
}
})
.text（函数（d）{返回d.value；}）；
svg.selectAll（“.name”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类”、“名称”）
.attr（“x”，函数（d）{返回d.value<0？x（0）+2.55:x（0）-2.55}）
.attr（“y”，函数（d）{返回y（d.word3）；}）
.attr（“dy”，y.带宽（）-2.55）
.attr（“文本锚定”，函数（d）{返回d.value<0？“开始”：“结束”}）
.text（函数（d）{返回d.word3；}）；
svg.append（“行”）
.attr（“x1”，x（0））
.attr（“x2”，x（0））
.attr（“y1”，0+页边距顶部）
.attr（“y2”，高度-页边距.top）
.attr（“笔划”，“#3a403d”）
.attr（“笔划宽度”、“1px”）；
}
条.出口（）
.transition（）
.持续时间（1000）
.attr（“宽度”，0）
.remove（）；
});
功能类型（d）{
d、 值=+d.值；
返回d；
}

我调用
draw（“ndtv）
来绘制第一个图形。但这并没有改变任何事情，我做错了什么？如果答案也能解释如何概括这些更新函数，那会有所帮助，因为我不仅想为这个图形解算它，而且想将它应用到其他任何图形中

JSFIDLE:
我在范围、输入/输出模式和数据处理中发现了一些错误。请参阅代码段中的修复：


var margin={top:10，right:0，bottom:0，left:0}，
宽度=400-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var svg=d3.选择（“#我的数据viz”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“变换”、“平移”（+margin.left+），“+marg