최소 cubism.js 수평선 차트 예제 (TypeError : 콜백 함수가 아닙니다.)

d3 및 큐 비젼 API 페이지에있는 코드에서 원하는 악보로 작업하기 위해 시간을 변경하는 악마가 있습니다. 해야 할 일 ...최소 cubism.js 수평선 차트 예제 (TypeError : 콜백 함수가 아닙니다.)

여기에 나열된 호라이즌 그래프의 단계를 따르려고하지만 이지만 큐브 또는 흑연 데이터 소스가 없습니다.

그래서 여기 mbostock의 대답에서 Using Other Data Sources for cubism.js 및/또는 여기에 랜덤 값을 돌려 메트릭 예를 들어 내가 그 상황에 맞는 API 페이지를에 생각 https://github.com/square/cubism/wiki/Context

를 메트릭 최소한의 예를 만들기 위해 노력하고있어 context.metric()에 대한 매개 변수를 설명하고, "... 결과를 사용할 수있는 콜백 함수"라는 부분을 이해하지 못합니다.

이

  <body> 
       <div class="mag"></div> 

       <script type="text/javascript"> 

var myContext = cubism.context(); 

var myHoriz = myContext.horizon() 
     .metric(function(start, stop, step, callback) { 
       var values = []; 
       start = +start; 
       stop = +stop; 
       while (start < stop) { 
         start += step; 
         values.push(Math.random()); 
       } 
       callback(null, values); 
     }); 

d3.select(".mag").selectAll("p") 
     .data([1, 2, 3, 7])    // the "times" for which I want to graph the data 
     .enter().append("p") 
     .call(myHoriz); 

       </script> 
     </body>

오 (편집), 내가 추가해야합니다 코드 : 브라우저의 콘솔에서 "콜백 기능없는 형식 오류는"나는 내 서버에서 다음을하고 난 내 브라우저에/새로 고침을 볼 때 내가 얻을 나는 4 개의 문단이 div에 추가 된 문서를 얻으며, 각 단락의 텍스트 내용은 숫자 1, 2, 3, 7입니다. 적어도 select(), data(), enter() 및 append() 비트가 작동합니다.

출처

2013-08-28 Martin Moops

큐브리즘 관련 기능을 사용하지 않으려면 [순수 D3 예제] (http://bl.ocks.org/mbostock/1483226)에서 시작하는 것이 더 쉽습니다. –

의견을 주신 Lars에게 감사드립니다 ... 사실, 심지어 Line Chart http://bl.ocks.org/mbostock/3883245조차도 괜찮을 것입니다. 제가 필요로하는 Horizon 차트에 관해서는 특별히 아무것도 없습니다. 그러나 입체파 내에서 두 가지 유형 (Horizon 및 Comparison) 중에서 선택해야하는 것처럼 보입니다. 결국에는 입체파처럼 보이는 두 번째 스크롤링 기능이 필요합니다 .js는 좋았습니까? –

매 초 스크롤 기능은 [이 D3 튜토리얼] (http://mbostock.github.io/d3/tutorial/bar-2.html)에서 설명합니다. –

horizon.metric과 context.metric을 혼동하는 것 같습니다. 정의중인 서명의 기능을 수행하는 것은 context.metric입니다.

출처

2013-08-28 14:46:44

오케이 스캇 카메론의 요점이 장애물을 극복했습니다. 나는 미래의 독자를 위해 결과로 나오는 코드와 함께 여기에 "대답"할 것이다. 여전히 내가 원했던 최소한의 예는 아니지만 오류를 없애고 새로운 질문에 대한 후속 조치를 요구할 것입니다.

  <body> 
       <div class="mag"></div> 

       <script type="text/javascript"> 

var myContext = cubism.context(); 

var myMetr = myContext.metric(function(start, stop, step, callback) { 
     var values = []; 
     start = +start; 
     stop = +stop; 
     while (start < stop) { 
       start += step; 
       values.push(Math.random()); 
     }  
     callback(null, values); 
});  

var myHoriz = myContext.horizon() 
     .metric(myMetr); 

d3.select(".mag").selectAll("p") 
     .data([1, 2, 3, 7]) 
     .enter().append("p") 
     .call(myHoriz); 

       </script> 
     </body>

출처

2013-08-28 15:32:34

업데이트 : 필자는 좀 더 간단한 예제를 만들었습니다. (외래 형식화 등으로 이해하는 것이 더 간단하다는 것을 알았습니다.) 최종 d3.select 섹션에서 2 줄, myContext.metric 섹션에서 여러 줄을 가져 와서, 여기에 표시된 URL에서 .json 파일을 가져옵니다 (후속 질문 있음). http://stackoverflow.com/questions/18522085/more-minimaler-cubism-js-horizon-chart-from-json-example 희망 그것은 누군가를 돕는다. –

최소 cubism.js 수평선 차트 예제 (TypeError : 콜백 함수가 아닙니다.)

답변

관련 문제