D3.js没有显示在Firefox中

Question

I can not run this visualization on firefox, while I can do it on Chrome and even on Edge :

https://naustud.io/tech-stack/

Since I was very inspired by it and wanted to analyze it - I am a beginner with d3.js -, the fact that this visualization can not be rendered on all browsers is a bit of a drag on my approach. .

Does anyone have an explanation? Can this be solved? Thank you everyone.

Answer 1

It seems like in Firefox, the clientWidth of the svg element isn't being read, possibly related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=874811 . Instead the width variable is being set to 0, and that looks like it causes infinite recursion when trying to pack the chart.

To correct this, you can use .node().parentNode.clientWidth (via How to get SVG element dimensions in FireFox? ), by adding this before the console.log in techstack-main.js (Line 490):

if (!width) {
  width = svg.node().parentNode.clientWidth;
}