Question

我正在使用D3.js. 我已经成功地将它添加到元素上并在主SVG上开始执行SVG绘图。

我希望SVG元素具有响应性，因此我决定将属性宽度和高度设置为100％。

然后我创建了一个div：

<div id='divForCharts' class='divCharts'>

</div>

然后通过CSS使div成为一个响应的广场：

.divCharts{
  width: 50%;
  height: 0;
  padding-bottom: 50%;


  background-color: red;
  margin: 0 auto;
}

与上面的css一样，我将背景颜色设置为红色，以确保我可以看到div实际上是一个正方形。在代码中，我确实在SAFARI和FIREFOX中都看到了一个红色方块。

单击按钮后，可以看到问题，该按钮遍历d3代码，该代码将SVG元素附加到上面的div并添加其他SVG元素。

在SAFARI上，一切都按照我的预期运作。可以看到SVG元素和父SVG元素的其他SVG子元素。

ON FIREFOX，没有任何内容。

然后我使用FIREBUG检查div并查看d3是否实际上添加了SVG。在检查之后，确认所有SVG都附加到DOM并且它们实际上与SAFARI上的相同。区别在于FIREFOX上没有出现任何内容。然后我查看了FIREFOX上的SVG元素属性。我设定的宽度和高度均为100％然后我玩这个，而不是设置一个百分比，我直接改变高度和宽度让我们说100并最终出现SVG。

简而言之，相同的代码在SAFARI中起作用，但在FIREFOX中不起作用....

FIREFOX正在发生什么阻止它出现？我该如何解决这个问题？

Answer 1

在这种情况下，JsFiddle会有所帮助。

通常，当您执行响应式可视化时，您不仅需要更多地控制视口的大小，还需要更多地控制正在显示的元素。例如，在较小的屏幕上，您必须减少轴上的刻度数。

要执行此操作，您可以侦听调整大小事件并相应地调整图形：

function resize() {
   /* Find the new window dimensions */
   var width = parseInt(d3.select("#graph").style("width")) - margin*2,
   height = parseInt(d3.select("#graph").style("height")) - margin*2;
}

d3.select(window).on('resize', resize);

以下是更多信息：https://www.safaribooksonline.com/blog/2014/02/17/building-responsible-visualizations-d3-js/

CSS和D3 - 在FIREFOX中制作响应式SVG

1 个答案: