d3 svg rect 不会在 chrome 中呈现答案

【问题标题】：d3 svg rect does not render in chromed3 svg rect 不会在 chrome 中呈现
【发布时间】：2019-03-10 07:35:12
【问题描述】：

我用 d3 库制作了一个条形图（主要在 firefox 中工作和测试），后来注意到 chrome 中 svg rect 的 fill 属性没有呈现，因此只显示了 x 和 y轴。

同样的事情发生在 safari iOS （我无法进行剧烈测试，但检查它是否仅在 chrome 中发生）。

有人知道这是为什么吗？
对正确方向的提示仍将不胜感激；
我在墙上。

这是pen。

澄清：
Firefox 中的 svg rect 按预期呈现。

如果是错误，这里是当前时间的version of each browser i'm running

【问题讨论】：

问题在于您的* CSS 选择器。没有必要使用*，而且在速度方面也不鼓励使用它。如果您将* 更改为html，您会看到条形图。为什么要设置矩形的填充和CSS .bar，才注意到它在CSS中被注释了
你为什么不用d3.json？
@rioV8 伙计，谢谢；我不知道这是不好的做法。这解决了我的问题。我可能会删除这个问题，考虑到它归结为糟糕的 CSS，除非你想要免费的互联网点。我主要尝试遵循 d3 文档；你是说我不应该使用 d3 cdn 而是使用本地 json 文件？
不需要自己写XMLHttpRequest，使用d3.json，它使用Fetch API with Promises
@rioV8 很漂亮。会试着弄清楚。谢谢指点。

【解决方案1】：

你的 * 选择器包含

width: auto;
height: auto;

不知何故，这会覆盖 rect 元素的宽度和高度，即使它不应该因为 rect 元素具有宽度和高度属性。删除这些设置，内容就会正确显示。

【讨论】：