D3.js 错误：<rect> 属性宽度：负值无效。（仅在 Chrome 中发生）答案

【问题标题】：D3.js Error: <rect> attribute width: A negative value is not valid. (only happens in Chrome)D3.js 错误：<rect> 属性宽度：负值无效。（仅在 Chrome 中发生）
【发布时间】：2019-07-23 17:10:38
【问题描述】：

我在 SAPUI5 中构建了一个应用程序，在 2 个单独的页面/面板上带有 2 个自定义 d3.js 控件（图表），我有一个奇怪的问题，它只在 Chrome 中表现出来。这有点难以解释。

当我在我的应用程序中关闭一个页面时，我在控制台中收到此错误“错误：属性宽度：负值无效。（“-100”）”，然后，我的另一个图表上的矩形消失了！

为了更好地解释，一些截图......用户显示包含两个图表的页面 both charts displayed

然后用户关闭右侧页面，只剩下一张图表显示...此时，控制台出现错误 right page closed

最后用户通过点击左侧页面的列表改变焦点，然后图表上的矩形消失了！ where'd my rects go?!?

我已确定错误发生在右侧图表的代码中，并且在包含该图表的面板关闭后发生。

            g.append("rect") // red
            .style("filter", "url(#drop-shadow)")
            .attr("x", 0) 
            .attr("y", 0) 
            .attr("rx", 6)
            .attr("ry", 6)
            .attr("width", width) // <-- this is where the error occurs
            .attr("height", height * red)
            .attr("fill", "#ca0101"); // full height

这是否正确我不确定，因为页面已关闭，宽度在技术上不存在，Firefox 和 Edge 似乎忽略了这个问题，控制台中没有显示错误，矩形没有消失，它只发生在 Chrome 中......这可能是 d3 和 chrome 的错误吗？

【问题讨论】：

您能否扩展您的代码 sn-p 以向我们展示width 的定义位置以及它如何变化（如果有的话）？
嗨，感谢您的回复......所以看起来这不再是问题了。今天早上，我将应用程序部署到我的 SAP Fiori 前端服务器，不管“错误”如何。猜猜看，它有效！这告诉我这个错误是 Chrome 和 SAPs WebIDE Fiori LaunchPad 沙箱之间的某个地方......与我的代码无关......快乐的日子:)

标签： google-chrome d3.js sapui5

【解决方案1】：

今天早上，我将应用程序部署到我的 SAP Fiori 前端服务器，不管“错误”如何。你猜怎么着，它有效！这告诉我这个错误是在 Chrome 和 SAPs WebIDE Fiori LaunchPad 沙箱之间的某个地方......与我的代码无关......快乐的日子:)

【讨论】：

【解决方案2】：

在我的情况下，它通过超时解决了！

 var results = getMyData();
 setTimeout(function () {
     _lineChart = new lineChart(chartDiv);
     _lineChart.update(results);
 }, 300);

【讨论】：