deck.js 섹션의 딤플 (d3.js) 차트 작성

Question

deck.js 프리젠 테이션에 dimple 플롯을 삽입하고 싶습니다. 온라인 아래의 코드는 백그라운드에서 몸체에 음모를 넣습니다. 그러나 섹션 클래스에 플롯을 표시하고 싶습니다. 나는 var svg = dimple.newSvg("body", 800, 600)에서 뭔가를 바꿔야한다고 생각합니다. 내 매우 제한된 자바 스크립트 기술 때문에 정확히 무엇을 바꿀지 전혀 모른다. 어떤 도움이라도 대단히 감사 할 것입니다.

<section class="slide" id="test-section"> 
<h2>test section</h2>  
    <script type="text/javascript"> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 
     <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script> 
    var svg = dimple.newSvg("body", 800, 600); 
    var data = [ 
     { "Word":"Hello", "Awesomeness":2000 }, 
     { "Word":"World", "Awesomeness":3000 } 
    ]; 
    var chart = new dimple.chart(svg, data); 
    chart.addCategoryAxis("x", "Word"); 
    chart.addMeasureAxis("y", "Awesomeness"); 
    chart.addSeries(null, dimple.plot.bar); 
    chart.draw(); 
    </script> 
</section> 

포함 된 특정 섹션 코드는 내 질문에 포함되어있는 경우. 필요한 경우 전체 코드는 here입니다. 에있는 색인 페이지는 소개 폴더에 있습니다.

Answer 1

몇 가지 해결해야합니다. 당신은 의심으로,

... 
    <script src="../modernizr.custom.js"></script> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script> 
</head> 

둘째와 요한 dimple.newSvg 뭔가 잘못 지적 : 당신은 문서의 머리에 D3와 딤플을로드하는 코드를 이동해야합니다. 그래프가 테스트 선택 슬라이드에만 추가되므로 모든 슬라이드가 추가되지 않도록 var svg = dimple.newSvg("#test-section", 800, 600);을 원할 것입니다.

실제로 멀리 한 단계를 이동하고 제어 할 수 있도록 그래프가 나타납니다 정확하게 어디에 HTML을 조금 바꿀 것

:

<h2>Graph Title</h2> 
<div id = "graphHere"></div> 
<h3>Some more text about the graph below the graph</h3> 

은 전달 선택을 변경, 텍스트 사이에 나타나는 그래프를 만들려면 우리가 만든 DIV의 ID로 딤플 :

var svg = dimple.newSvg("#graphHere", 800, 600); 

마지막으로, 슬라이드에 맞게 너무 커서이기 때문에 그래프의 크기를 조정 이상한을하고있다 chart.js. chart.js의 소스를 통해 파고하지 않고, 우리는 작은 그래프를 작성하여 문제를 해결할 수 :

var svg = dimple.newSvg("#graphHere", 400, 200); 

Answer 2

나는 deck.js을 사용한 적이 있지만 시도 :

var svg = dimple.newSvg(".slide", 800, 600);

또는

을

var svg = dimple.newSvg("#test-section", 800, 600);

가 작동하는지 알려주세요. 그렇지 않다면 코드를 살펴 보겠습니다.

첫째, 다른 스크립트 태그의 내부에 스크립트 태그를 넣을 수 없습니다 :

Answer 3

나는 deck.js의 모습을 좋아하는 난 그냥 그것을 아래로 뽑아 연극을했다 있도록. 나는 그 때 돌아와 아담이 기본적으로 내가 발견 한 모든 것을 설명했다는 것을 발견했다. 슬라이드 안에 div를 넣고 그 위에 svg를 추가해야합니다. 그렇지 않으면 덱 스케일링 코드가 차트를 복제합니다.

먼저 관련 슬라이드에 사업부를 추가합니다 (만약 당신이 좋아하면, 또는 헤더)

<section class="slide"> 
    <div id="myChartDiv"></div> 
</section> 

그런 다음 하단에있는 설정에 대한 참조를 추가 한 후

<!-- Required JS files. --> 
<script src="jquery-1.7.2.min.js"></script> 
<script src="core/deck.core.js"></script> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script> 

보조개 코드 그 아래 :

는

<script type="text/javascript"> 

    var svg = dimple.newSvg("#myChartDiv", 800, 600); 
    var data = [ 
     { "Word":"Hello", "Awesomeness":2000 }, 
     { "Word":"World", "Awesomeness":3000 } 
    ]; 
    var chart = new dimple.chart(svg, data); 
    chart.addCategoryAxis("x", "Word"); 
    chart.addMeasureAxis("y", "Awesomeness"); 
    chart.addSeries(null, dimple.plot.bar); 
    chart.draw(); 
</script> 

나는 희망이

,691 희망

John

Answer 4

나는이 스레드가 오래 전부터 나온 것으로 알고 있지만, 아담의 대답 외에도 한 가지를 추가하겠습니다. 적어도 딤플 v2.1.2 + deck.js v1.1.0 + Firefox 34.0에서 아담의 예에서는 그래프가 손상되었습니다. div 태그의 크기를 명시 적으로 설정해야합니다 :

<div id="graphHere" style="width:400px;height:300px;"></div> 
... 
<script> 
var svg = dimple.newSvg("#graphHere", 400, 300); 
// plotting function goes here 
</script>