Jak tworzyć wykresy w dc.js przewijane w ramach ustalonego wymiaru div?

Robiłem kilka wykresów przy użyciu dc.js i rysuję niektórych producentów w tabeli wierszy względem ich liczby. kiedy producent zwiększa liczbę, szerokość rzędu staje się naprawdę mała i trudna do rozróżnienia. Próbowałem użyć przepełnienia: przewiń w css, ale także przewija skalę za pomocą wykresu.Jak tworzyć wykresy w dc.js przewijane w ramach ustalonego wymiaru div?

Źródło

2014-11-25 Ankit

Nie wiem, dlaczego zostało to odrzucone. To interesujące pytanie. Ponieważ SVG nie wspiera natywnie przewijania, musisz zrobić trochę hakowania. Oto pokrewne pytanie: http://stackoverflow.com/questions/4720627/how-to-gets-scrollbars-in-svg-for-multiple-content. Innym pomysłem jest wyciągnięcie osi z SVG i umieszczenie go w innym elemencie, a następnie użycie przelewu na oryginalnym elemencie div. – Gordon

@ankit Jednym ze sposobów jest użycie css scroller, połączenie tego z etykietami na pasku. To by trochę złagodziło ból. –

Istnieje sposób na zrobienie tego. Mam 4 pliki: index.html, iframe.html, iframe.css i iframe.js. Oto moja konfiguracja. W index.html miałem:

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

w iframe.html miałem:

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

w iframe.css miałem:

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

w iframe.js Posiadałem:

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

W tej konfiguracji miałem wszystkie 4 pliki na tym samym poziomie w moim katalogu.

Źródło

2015-07-07 02:51:21

Jak tworzyć wykresy w dc.js przewijane w ramach ustalonego wymiaru div?

Odpowiedz

Powiązane problemy