path.node（）。getTotalLength（）挂起浏览器

Question

我正在尝试生成折线图，但是我在尝试使用函数getTotalLength（）获取svg路径的长度时遇到错误。这对我来说很奇怪，因为Firefox 19.0.2运行正常但Safari 6.0.2和Chrome 25.0.1364.160挂起。

发生错误的代码如下：

          function displayValueLabelsForPositionX(xPosition) {
            if (typeof jsondata.length == 'undefined') {
                return;
            }

            // position label values
            var pathEl = path.node();     
            var pathLength = pathEl.getTotalLength();

           (...)
         }

错误总是在对pathEl.getTotalLength（）的调用中发生，并且路径似乎是正确的，但长度为150KB：

<path class=​"line" d=​"M0.0020634675065341434,384.8476217601823C0.002751290008712191,384.8476217601822,0.0034391125108902388,384.8476217601822,0.004126935013068286,384.8476217601823C0.0048147575152463346,384.8476217601822,0.005502580017424381,384.8476217601822,0.006018446894057917,384.8476217601823C0.006534313770691453,384.8476217601822,0.006878225021780477,384.8476217601822,0.61216202693

(...)

1006.9979365324934,312.1617772714327" clip-path=​"url(#clip)​">​</path>​

有什么想法吗？没有这个函数，有没有其他方法来获得这个长度？

此致 琼

Answer 1

这个函数可能有两个不同的问题：

constructor {
   this.state = {
       mode: 'image'
   }
}


render() {
const {mode} = this.state;
    return (
        <React.Fragment>
        {
            mode === "image" ? <img onClick={()=>{this.setState("div")}}/>:(
                <div>//content here</div>
            )             
        }
        </React.Fragment>
    )
}

1.问题可能是，这个函数被多次调用，这 每次都会导致文档回流。

一个解决方案可能是自己计算/近似路径的长度。 如果路径相当简单并且您了解它是如何构建的，那效果会很好。

您可以尝试使用“毕达哥拉斯”定理（哇，我从没想过我在编程中需要它！）或其他几何公式来近似路径长度以接近您的需要。它在任何方面都比使用 getTotalLength() 快得多。

2.问题可能是你的路径很复杂（150kb）

在这种情况下，您可以尝试使用 SVG 缩小器/简化器（例如 Peter Collingridge SVG Minifier 或其他工具中的缩小器/简化器）来简化您的路径。