Question

我想使用媒体查询来调整d3.js图表的大小，并应用过渡。 html中的图形设置为：

<g id="d3js_graph">
<svg class="d3svg"></svg>
<script src="JS\D3_BarChart.js"></script>
</g>

我将媒体查询应用于d3svg类并使用了转换：

@media (min-width: 1080px) {
  .d3svg {
    transform: translate(-30px,-30px); }
}

这可以移动图形，但是现在图形显示为左半边空白，这意味着图形已移动，但容器尚未移动。因此，我将其反转并将媒体查询应用于d3js_graph ID（在上面的开头g标签中）：

@media (min-width: 1080px) {
  #d3js_graph {
    transform: translate(-30px,-30px); }
}

但是那什么也没做，所以那不是要素。这是上面显示的.d3svg类。我可以在d3.js文件中使用过渡：

d3.select（“ body”）。transition（）。style（“ color”，“ red”）;

但是如何在d3.js文件的媒体查询中执行d3.select？我在文件中添加了媒体查询，但这只是使图形从屏幕上消失了。

所以我的问题是：当我使用变换移动图形时，为什么图形在左侧部分被遮盖了？在d3.js上进行媒体查询的控制因素是什么？

感谢您的帮助。

Answer 1

这个...

case Types.GET_BOOKS_SUCCESS: {
        return {
            ...state,
            data: action.payload.items,
            loader: false,
        };
}

...无效。 <g id="d3js_graph"> <svg class="d3svg"></svg> <script src="JS\D3_BarChart.js"></script> </g>元素是SVG elements，只能在SVG内部使用。

您需要的是HTML <g>：

<div>

此外，我会考虑将<div id="d3js_graph"> <svg class="d3svg"></svg> <script src="JS\D3_BarChart.js"></script> </div>移到div之外。

d3.js中的媒体查询仅部分成功

1 个答案: