D3js折线图未转换，新栏上的工具提示错误

Question

我在设置要转换数据的条形图和折线图时遇到麻烦。 有关代码，请参见JSFiddle 。 我是JSFiddle＆D3js的一星期大孩子，所以对您的任何帮助都非常感谢！

问题是：

1. 绿线未过渡
2. 在“更新”之后添加到图表的任何新条形都不会显示工具提示。 检查显示Uncaught TypeError：无法在d3.tip.min.js中将属性'x'设置为null，这是导致此错误的原因。

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

代码在这里：

<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：拉斯，感谢您的所有帮助！

Answer 1

您那里只有一些小事情，特别是

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

这里的工作示例。