Come far scorrere i grafici in dc.js all'interno di un div di quota fisso?

Ho fatto alcuni grafici usando dc.js e sto tramando alcuni produttori in un grafico a righe contro il loro conteggio. quando il produttore aumenta di numero, la larghezza della riga diventa molto piccola e difficile da distinguere. Ho provato a usare l'overflow: scorri in css ma scorre anche la scala con il grafico.Come far scorrere i grafici in dc.js all'interno di un div di quota fisso?

fonte

2014-11-25 Ankit

Non so perché questo è stato downvoted. È una domanda interessante Dal momento che SVG non supporta nativamente lo scrolling, dovresti fare un po 'di hacking. Ecco una domanda correlata: http://stackoverflow.com/questions/4720627/how-to-gets-scrollbars-in-svg-for-multiple-content. Un'altra idea è quella di estrarre l'asse da SVG e inserirlo in un altro elemento, quindi utilizzare l'overflow sul div originale. – Gordon

@ankit Un modo è usare lo scroller css, accoppiandolo con le etichette della barra. Ciò faciliterebbe un po 'il dolore che immagino. –

C'è un modo per farlo. Ho 4 file, index.html, iframe.html, iframe.css e iframe.js. Ecco la mia configurazione. In index.html ho avuto:

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

in iframe.html ho avuto:

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

in iframe.css ho avuto:

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

in iframe.js Ho avuto:

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

In questa configurazione ho avuto tutti e 4 i file nello stesso livello nella mia directory.

fonte

2015-07-07 02:51:21

Come far scorrere i grafici in dc.js all'interno di un div di quota fisso?

risposta

Problemi correlati