个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 02:45:24 24 4
gpt4 key购买 nike

我想在不同分辨率下设置不同宽度的 dc.chart svg，但媒体查询不起作用。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>

最佳答案

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

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

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

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

关于css - 媒体查询不适用于 dc.js 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33950076/

24 4 0
文章推荐： jquery - 你在哪里放置 jquery 以实现平滑滚动？
文章推荐： javascript - 当我尝试保存在 MongoDB 中时，.then 未定义
文章推荐： node.js - Telegram Webhook 在群聊中未触发
文章推荐： python - 从循环中的字符串列表创建新的列名
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com