Media query in d3.js only partially successful - d3.js

Question

I want to resize a d3.js chart using media queries, and apply transitions. The graph setup in html is:
<g id="d3js_graph">
<svg class="d3svg"></svg>
<script src="JS\D3_BarChart.js"></script>
</g>
I applied a media query to the d3svg class and used a transform:
#media (min-width: 1080px) {
.d3svg {
transform: translate(-30px,-30px); }
}
That works to move the graph, but now the graph shows with the left half blanked out, which implies that the graph but not its container have been moved. So I reversed it and applied the media query to the d3js_graph ID (in the opening g tag above):
#media (min-width: 1080px) {
#d3js_graph {
transform: translate(-30px,-30px); }
}
But that does nothing, so that’s not the element. It’s the .d3svg class shown above. I could use a transition in the d3.js file:
d3.select("body").transition().style("color", "red");
but how to I do d3.select within a media query in the d3.js file? I added a media query in the file, but it simply caused the graph to disappear from the screen.
So my question is: why is the graph partially blanked out on the left side when I move it using a transform? What’s the controlling element for a media query on d3.js?
Thanks for any help.

Answer 1

This...
<g id="d3js_graph">
<svg class="d3svg"></svg>
<script src="JS\D3_BarChart.js"></script>
</g>
... is invalid. <g> elements are SVG elements, and can only be used inside SVGs.
What you want is an HTML <div>:
<div id="d3js_graph">
<svg class="d3svg"></svg>
<script src="JS\D3_BarChart.js"></script>
</div>
Also, I'd consider moving that <script> to outside the div.