D3js折线图没有过渡，新栏上的工具提示错误

Question

我在酒吧和酒吧遇到麻烦我正在设置过渡数据的折线图。见JSFiddle here for the code。我对JSFiddle＆amp; amp; D3js所以感谢任何帮助！

问题是：

1. 绿线未转换
2. “更新”后添加到图表中的任何新栏都不显示工具提示。 Inspect显示一个Uncaught TypeError：无法在d3.tip.min.js中设置null的属性'x'，这是造成这种情况的原因。

我正在调用图表以通过按钮创建和更新。一旦创建和更新，必须重新启动小提琴才能再次使用。

代码在这里：

<input id="clickMe1" type="button" value="Create Chart" onclick='createMainPerfChart()' />
<input id="clickMe2" type="button" value="Update Chart" onclick='updateMainPerfChart()' />
<div style="margin-top:120px;">
    <svg id="mainchart"></svg>
</div>

PS：Lars，谢谢你的帮助！

Answer 1

你在那里只有一些小事，特别是

1. 这里的问题是一个简单的拼写错误。您需要执行svg.selectAll("path.TGTLine")而不是svg.selectAll("path.TargetAvg")。
2. 看起来d3.tip不喜欢有两个具有相同类的工具提示。您可以通过重复使用tip的定义而不是将其声明两次来解决此问题。

工作示例here。