javascript - 更新的表标题附加到前一个，而不是替换它

Question

我有一个用 d3.js 生成的表；当我在下拉菜单中进行选择时(例如，“阿拉斯加”而不是初始/默认值“阿拉巴马州”)，标题应该更新。尽管我能够让新标题出现在表格上方，但我的问题是更新的标题附加到前一个标题，而不是替换它。

这是我的傻瓜:http://next.plnkr.co/edit/7b4CmQqnm3L70QL9FgQD

我尝试将生成标题的代码移到最后的大括号 }; 之外，虽然这解决了重复问题，但这只会导致 selectedState标题仍停留在“阿拉巴马州”。

我还尝试修改 onchange() 函数，使其以与 table 类似的方式删除 #title div当表格更新时，div 被删除。虽然这成功地完全删除了 #title div，但新标题并没有被重新绘制——它只是被删除了。

我试过将标题或其中的一部分定义为常量。但我只是得到语法错误。任何人都可以根据 this Plunker 演示更新标题的正确方法吗？ ？我已经尝试按照 .enter、.update 和 .exit 的教程进行操作，但我根本无法掌握如何应用它们 — 或者即使它们适用于我的情况。

Answer 1

在您的代码中，这...

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

...只是连接 <div> 中的所有先前文本与新文本。

取而代之的是，只需分配一个新值:

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

这是更新的 Plunker:http://plnkr.co/edit/qCk4iu51SAtHJ3LzTB27?p=preview