media queries not working on dc.js chart

2019-09-10 02:30发布

站内问答 / HTML/CSS
1653 1 2

I want to set different width of dc.chart svg on different resolution,but media queries are not working.Is dc.chart supporting media queries or not? please suggest me solution for it as soon as possible.

<!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>

1条回答
冷血范
2楼-- · 2019-09-10 03:06

The svg element is directly sized by dc.js, and since element-level styles override stylesheet-level styles, your media queries will have no effect.

What you want to do is set the size of the containing div (#chartCumulativeDVH or .dc-chart).

Then you have two at least three choices how to apply the size to the svg element that will be created:

  1. Leave off the width and height as you show in your example. dc.js will automatically use the size of the container div if width and height are not specified. However, this will not work if anything else is in the div (or might show up there, like the filter and reset controls) because they will no longer be the same size, and the svg size can get out of control in these cases.
  2. Set the size of the chart to match the div size, e.g. (using jQuery) something like chart .width($('#chartCumulativeDVH').innerWidth()) .height($('#chartCumulativeDVH').innerHeight())
  3. Or, to base the width and height off the window size without using jQuery and without the media query, as we do in the resizing bar chart example: chart .width(window.innerWidth-20) .height(window.innerHeight-20)
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)