媒体查询不工作在dc.js图表 [英] media queries not working on dc.js chart
本文介绍了媒体查询不工作在dc.js图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为不同的分辨率设置不同的dc.chart svg宽度，但媒体查询不工作。dc.chart支持媒体查询或不？
请尽快为我提出解决方案。
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>
推荐答案
svg 元素由dc.js直接调整大小，并且由于元素级样式覆盖样式表级样式，您的媒体查询将不起作用。
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.
想要做的是设置包含div的大小（ #chartCumulativeDVH 或 .dc-chart ）。
What you want to do is set the size of the containing div (#chartCumulativeDVH or .dc-chart).
然后您可以两个至少三个选项如何将大小应用到 svg 元素：
Then you have two at least three choices how to apply the size to the svg element that will be created:
- 取消
宽度和height。 dc.js将自动使用容器div的大小，如果未指定width和height。但是，如果div中有任何其他内容（或者可能显示在过滤器和重置控件中），这将不会工作，因为它们将不再是相同的大小，并且svg大小在这些情况下可能失去控制。 - 图表匹配div大小，例如（使用jQuery）
chart
.width（$（'＃chartCumulativeDVH'）。innerWidth（））
.height #chartCumulativeDVH'）。innerHeight（））
- 或者，基于窗口大小的宽度和高度，而不使用jQuery和媒体查询，就像我们在调整大小条形图示例中所做的那样 ：
chart
.width（window.innerWidth-20）
.height（window.innerHeight-20）
- Leave off the
widthandheightas you show in your example. dc.js will automatically use the size of the container div ifwidthandheightare 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. - Set the size of the chart to match the div size, e.g. (using jQuery) something like
chart .width($('#chartCumulativeDVH').innerWidth()) .height($('#chartCumulativeDVH').innerHeight()) - 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)
这篇关于媒体查询不工作在dc.js图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
