Javascript 更新后的表标题将附加到上一个表标题，而不是替换它

我有一个用d3.js生成的表；当我在下拉菜单中进行选择时（例如，“阿拉斯加”而不是初始/默认值“阿拉巴马”），标题应该更新。 虽然我能够使新标题显示在表上方，但我的问题是更新后的标题会附加到上一个标题上，而不是替换它

这是我的扑克牌：

我尝试将生成标题的代码移到最后一个大括号

}之外

，虽然这解决了重叠问题，但这只会导致标题中的

selectedState

停留在“Alabama”上

我还尝试修改了

onchange（）

函数，使其删除

#title

div的方式与更新表时删除

表

div的方式类似。虽然这成功地完全删除了

#title

div，但新标题不会被重新绘制，只是被删除了

我试着将标题或其一部分定义为常量。但我只是得到语法错误。 是否有人可以根据以下内容演示更新标题的正确方法？我尝试了以下

.enter

、

.update

和

.exit

的教程，但我无法掌握如何应用它们，或者即使它们适用于我的情况。

在您的代码中，这

div.innerHTML += 'Primary substance use among TEDS aged 12 years and older, by gender, age, race, and ethnicity: ' + selectedState;

…只是将该

中以前的任何文本与新文本连接起来

相反，只需指定一个新值：

div.innerHTML = 'Primary substance use among TEDS aged 12 years and older, by gender, age, race, and ethnicity: ' + selectedState;

---

下面是更新的Plunker:

除了问题中描述的问题之外，我希望您不介意我说您的代码还有其他几个问题，从缺少正确的更新模式到侦听器中的异步代码。当您有一个最终的、有效的代码时，我建议您在以下位置寻求惯用的解决方案。