मैं dc.js का उपयोग करके कुछ ग्राफ बना रहा हूं और मैं कुछ निर्माताओं को उनकी गिनती के खिलाफ पंक्ति-चार्ट में प्लॉट कर रहा हूं। जब निर्माता संख्या में वृद्धि करता है तो पंक्ति चौड़ाई वास्तव में छोटी हो जाती है और अंतर करने में मुश्किल होती है। मैंने ओवरफ़्लो का उपयोग करने का प्रयास किया: सीएसएस में स्क्रॉल करें लेकिन यह ग्राफ के साथ स्केल को भी स्क्रॉल करता है।डीसीजेएस स्क्रॉल करने योग्य में एक निश्चित आयाम div के भीतर ग्राफ कैसे बनाएं?
ऐसा करने का एक तरीका है। मेरे पास 4 फाइलें हैं, index.html, iframe.html, iframe.css, और iframe.js। मेरा सेटअप यहाँ है। में index.html मैं था:
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="crossfilter.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="dc.css">
<link type="text/css" rel="stylesheet" href="iframe.css">
</head>
<body>
<iframe class="iframe" src="iframe.html"></iframe>
<script type="text/javascript" src="iframe.js"></script>
</body>
</html>
में iframe.html मैं था:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="crossfilter.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="dc.css">
</head>
<body>
<div id="rowChart"></div>
<script type="text/javascript" src="iframe.js"></script>
</body>
</html>
iframe.css मैं था:
.iframe {
width: 800px;
height: 200px;
border: none;
}
में iframe.js मेरे पास था:
var data = [];
for (var i = 1; i < 10; i++) {
data.push({
val: i
});
}
var ndx = crossfilter(data);
var dim = ndx.dimension(function(d) {
return d.val;
});
var group = dim.group().reduceSum(function(d) {
return d.val;
});
rowChart = dc.rowChart("#rowChart");
rowChart.width(800)
.height(400)
.margins({top: 10, right: 40, bottom: 30, left: 40})
.dimension(dim)
.group(group)
.elasticX(true)
.gap(1)
.x(d3.scale.linear().domain([-1, 10]))
.transitionDuration(700);
dc.renderAll();
इस सेटअप में मेरे पास मेरी निर्देशिका में एक ही स्तर पर सभी 4 फ़ाइलें थीं।
यह सुनिश्चित नहीं है कि यह क्यों डाउनवॉट किया गया था। यह एक दिलचस्प सवाल है। चूंकि एसवीजी मूल रूप से स्क्रॉलिंग का समर्थन नहीं करता है, इसलिए आपको कुछ हैकिंग करना होगा। यहां एक संबंधित प्रश्न है: http://stackoverflow.com/questions/4720627/how-to-gets-scrollbars-in-svg-for-multiple-content। एक और विचार एसवीजी से अक्ष को खींचना और इसे किसी अन्य तत्व में रखना है, और फिर मूल div पर अतिप्रवाह का उपयोग करना है। – Gordon
@ankit एक तरीका सीएसएस स्क्रोलर का उपयोग करना है, जो कि बार लेबल के साथ है। इससे मुझे लगता है कि दर्द में से कुछ को कम करेगा। –