Sabit bir boyut div içinde dc.js'de kaydırılabilir grafikler nasıl oluşturulur?

dc.js'yi kullanarak bazı grafikler yapıyorum ve bazı üreticileri bir satır grafiğinde sayımlarına göre çiziyorum. Üreticinin sayı arttığında satır genişliği gerçekten küçük ve ayırt edilmesi zorlaşır. Aşırı taşmayı kullanmayı denedim: css'de kaydır, ancak ölçek grafiğe de kaydırır.Sabit bir boyut div içinde dc.js'de kaydırılabilir grafikler nasıl oluşturulur?

kaynak

2014-11-25 Ankit

Bunun neden önem verilmediğinden emin değilsiniz. Bu ilginç bir soru. SVG, kaydırma işlemini yerel olarak desteklemediğinden, bazı bilgisayar korsanlığı yapmanız gerekir. İşte ilgili bir soru: http://stackoverflow.com/questions/4720627/how-to-gets-scrollbars-in-svg-for-multiple-content. Başka bir fikir, ekseni SVG'den dışarı çıkarmak ve onu başka bir öğeye yerleştirmek ve sonra orijinal div üzerinde taşmayı kullanmaktır. – Gordon

@ankit Bir yol css kaydırıcısını kullanmaktır, bunu çubuk etiketleriyle birleştirmek. Bu sanırım acıyı hafifletir. –

Bunu yapmanın bir yolu var. 4 dosyam, index.html, iframe.html, iframe.css ve iframe.js var. İşte benim kurulumum. yılında index.html vardı:

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

yılında Iframe.html vardı: yılında

<!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 vardı:

.iframe { 
    width: 800px; 
    height: 200px; 
    border: none; 
}

yılında iframe.js Ben vardı:

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();

Bu kurulumda, dizinimdeki tüm 4 dosya aynı düzeyde vardı.

kaynak

2015-07-07 02:51:21

Sabit bir boyut div içinde dc.js'de kaydırılabilir grafikler nasıl oluşturulur?

cevap

İlgili konular