медиа-запросы, не работающие на диаграмме dc.js

Я хочу установить различную ширину dc.chart svg для разных разрешений, но медиа-запросы не работают. Является dc.chart, поддерживающим запросы к мультимедиа или нет? , пожалуйста, предложите мне решение для него как можно скорее.медиа-запросы, не работающие на диаграмме dc.js

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

источник

2015-11-27 user3567857

svg элемента непосредственно размер от dc.js, и поскольку стили элементов уровня переопределения стилей таблиц стилей на уровень, ваши медиа запросы не будут иметь никакого эффекта.

Что вы хотите сделать, это установить размер содержащего div (#chartCumulativeDVH или .dc-chart).

Тогда у вас есть два по крайней мере три варианта, как применить этот размер svg элемента, который будет создан:

Бросьте в width и height, как вы показываете в вашем примере. dc.js автоматически будет использовать размер контейнера div, если width и height не указаны. Однако это не сработает, если что-то еще в div (или может появиться там, например, фильтр и элементы управления сбросом), потому что они больше не будут иметь одинаковый размер, and the svg size can get out of control in these cases.
Установите размер диаграммы в соответствии с размером div, например. (С помощью JQuery) что-то вроде chart .width($('#chartCumulativeDVH').innerWidth()) .height($('#chartCumulativeDVH').innerHeight())
Или базировать ширину и высоту выключить размер окна без использования JQuery и без запроса средств массовой информации, как мы делаем в resizing bar chart example: chart .width(window.innerWidth-20) .height(window.innerHeight-20)

источник

2015-11-27 14:36:00 Gordon

Я попытался медиазапросы на chartCumulativeDVH, но его не работает.my chartID находится внутри iframe.I думаю, что это причина, почему медиа-запросы не работают. Пожалуйста, предложите другое решение – user3567857

Если сами медиа-запросы вообще не работают, вам придется пойти с второе решение для JavaScript. Я добавлю пример без jQuery, используя ширину/высоту окна. – Gordon

max-device-width работал для меня вместо max-width для медиа-запросов – user3567857

медиа-запросы, не работающие на диаграмме dc.js

ответ

Смежные вопросы