媒体查询不适用于 dc.js 图表

Question

我想在不同分辨率下设置不同宽度的 dc.chart svg，但是媒体查询 working.Is dc.chart 不支持媒体查询吗？请尽快给我建议解决方案。

<!DOCTYPE html>
<html lang="en" style="overflow:hidden">
    <head>

        <title>DVH Graph</title>
        <meta charset="UTF-8">

        <!-- Stop this page from being cached -->
        <meta http-Equiv="Cache-Control" Content="no-cache">
        <meta http-Equiv="Pragma" Content="no-cache">
        <meta http-Equiv="Expires" Content="0">        
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/dc.css"/>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/hash2Color.js"></script>
        <script type="text/javascript" src="js/loadDVH.js"></script>
        <script type="text/javascript" src="js/d3.js"></script>
        <script type="text/javascript" src="js/crossfilter.js"></script>
        <script type="text/javascript" src="js/dc.js"></script>
             <style type="text/css">
               @media(max-width:1280px) {   
            .dc-chart .axis path, .axis line { stroke:#000; }
            .dc-chart .axis text { fill: #000; } 
            .dc-chart svg{width:350px;height:340px;margin-left:10px} 
            .dc-chart{margin-left:-7px;margin-top:-9px}
            }
             @media(max-width:1920px) { 
            .dc-chart .axis path, .axis line { stroke: #000; }
            .dc-chart .axis text { fill: #000; } 
            .dc-chart svg{width:590px;height:340px;margin-left:10px}
            .dc-chart{margin-left:-7px;margin-top:-9px}
            }


        </style>

    </head>
    <body style="background:#000000" border="0">

        <div id="chartCumulativeDVH" style="background: #ffffff;"></div>
        <script type="text/javascript">

            var chart = dc.seriesChart("#chartCumulativeDVH");
            var ndx, doseDimension, doseGroup;

            function drawDVH(data) {
                //
                // The data returned from the DSS Data API isn't quite in the best format for dc graphs
                // So, we need to reformat it slightly
                //

                var dvhColours = [];
                var formatted = [];
                for (var objCount = 0; objCount < data.length; objCount++) {
                    var contourID = objCount + 1;
                    for (var i = 0; i < data[objCount].NumberOfPoints; i++) {
                        data[objCount].Points[i].Contour = contourID;
                        formatted.push(data[objCount].Points[i]);
                    }

                    // Match the colour of the curve to the label.
                    var rgb = hash2Color(data[objCount].Contour);
                    dvhColours.push('rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
                }

                // Clear the existing chart
                if(ndx) {
                    ndx.remove();
                    ndx.add(formatted);
                    dc.redrawAll();
                }

                ndx = crossfilter(formatted);
                doseDimension = ndx.dimension(function(d) {
                    return [+d.Contour, +d.X];
                });

                doseDimension.filterFunction(function(d) {
                    return d;
                });

                doseGroup = doseDimension.group().reduceSum(function(d) {
                    return +d.Y;
                });

                chart
                   /*  .width(347)
                    .height(280)  */
                    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
                    .x(d3.scale.linear().domain([0, 7500]))
                    .y(d3.scale.linear().domain([0, 100]))
                    .brushOn(false)
                    .yAxisLabel("% Volume")
                    .xAxisLabel("Dose mGy")
                    .clipPadding(10)
                    .dimension(doseDimension)
                    .group(doseGroup)
                    .mouseZoomable(true)
                    .seriesAccessor(function(d) { return "Contour: " + d.key[0]; })
                    .keyAccessor(function(d) { return +d.key[1]; })
                    .valueAccessor(function(d) { return +d.value; })
                    .ordinalColors(dvhColours);

                chart.yAxis().tickFormat(function(d) {return d3.format(',d')(d + 0);});
                chart.margins().left = 40;

                dc.renderAll();

            };

            $(document).on("data-available", function (__e, __data) {
                drawDVH(__data);
            });

            // Draw the default graph (e.g. no data)
            drawDVH({});
        </script>
    </body>
</html>

Answer 1

svg 元素的大小直接由 dc.js 确定，并且由于元素级样式会覆盖样式表级样式，因此您的媒体查询将无效。

您要做的是设置包含 div（#chartCumulativeDVH 或 .dc-chart）的大小。

然后你有两个至少三个选择如何将大小应用到将要创建的 svg 元素：

如示例中所示，省略 width 和 height。如果未指定 width 和 height，dc.js 将自动使用容器 div 的大小。但是，如果 div 中有任何其他内容（或者可能会出现在那里，例如过滤器和重置控件），这将不起作用，因为它们的大小将不再相同，and the svg size can get out of control in these cases.
设置图表的大小以匹配 div 大小，例如（使用 jQuery）类似 chart .width($('#chartCumulativeDVH').innerWidth()) .height($('#chartCumulativeDVH').innerHeight())
或者，在不使用 jQuery 且不使用媒体查询的情况下，根据 window 大小设置宽度和高度，就像我们在 resizing bar chart example 中所做的那样： chart .width(window.innerWidth-20) .height(window.innerHeight-20)

媒体查询不适用于 dc.js 图表

media queries not working on dc.js chart

css

media-queries

d3.js

dc.js