dc.js에서 그래프를 고정 된 치수 div 내에서 스크롤 할 수있게 만드는 방법은 무엇입니까?

저는 dc.js를 사용하여 그래프를 만들었고 일부 제조사를 차트에 맞게 계산하고 있습니다. 제조 업체의 수가 늘어 나면 행 너비가 실제로 작아 구별하기가 어려워집니다. CSS에서 overflow : scroll을 사용하려고했지만 그래프로 스케일을 스크롤합니다.dc.js에서 그래프를 고정 된 치수 div 내에서 스크롤 할 수있게 만드는 방법은 무엇입니까?

출처

2014-11-25 Ankit

왜 이것이 다운 voted인지 확실하지 않습니다. 흥미로운 질문입니다. SVG는 기본적으로 스크롤을 지원하지 않기 때문에 해킹을해야합니다. 다음은 관련 질문입니다. http://stackoverflow.com/questions/4720627/how-to-gets-scrollbars-in-svg-for-multiple-content. 또 다른 아이디어는 축을 SVG 밖으로 당겨 다른 요소에 넣은 다음 원본 div에서 오버플로를 사용하는 것입니다. – Gordon

@ankit 한 가지 방법은 CSS 스크롤러를 사용하는 것입니다. 그것은 내가 생각하는 고통을 덜어 줄 것이다. –

이렇게하는 방법이 있습니다. index.html, iframe.html, iframe.css 및 iframe.js의 4 개 파일이 있습니다. 여기에 내 설정입니다. 에서 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 개의 파일을 모두 가지고있었습니다.

출처

2015-07-07 02:51:21

dc.js에서 그래프를 고정 된 치수 div 내에서 스크롤 할 수있게 만드는 방법은 무엇입니까?

답변

관련 문제