2014-11-08 3 views
2

레일즈 앱에서 RequireJS와 함께 c3.jsd3.js을 사용하려고합니다. 다음과 같이 내 application.html.erb 보인다 :Rails, RequireJS, C3.js : c3이 정의되지 않았습니다.

application.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%= yield(:title) %></title> 
    <%= stylesheet_link_tag "application", :media => "all" %> 
    <%= stylesheet_link_tag params[:controller] %> 
    <%= csrf_meta_tags %> 
    </head> 
    <body> 
    <div> 
     <%= yield %> 
    </div> 
    <%= requirejs_include_tag params[:controller] %> 
    </body> 
</html> 

현재 컨트롤러가 instructor하고 성공적으로로드되는 파일, 다음과 같이 instructor.js 보이는 :

instructor.js을

require(["jquery", "modules/d3.min", "modules/c3.min"], function($, d3, c3) 
{ 
    console.log(d3); 
    console.log(c3); 
}); 

이제 응용 프로그램을 실행할 때 오류가 없지만 c3은 정의되지 않습니다. 여기에 콘솔 출력입니다 :

콘솔

Object {version: "3.4.13", ascending: function, descending: function, min: function, max:function…} // instructors.js:3 
undefined // instructors.js:4 

그래서 d3.js 잘로드되는하지만 c3.js은 정의되지 않습니다. 나는 여기서 무엇이 잘못 될지 이해하지 못한다. 도와주세요.

감사합니다.

답변

1

c3을 초기화 할 때 전역 범위에서 d3을 찾고 거기에서 찾을 수 없으면 d3이라는 명명 된 경로로 require로 해결하려고 시도합니다. require를 사용하여 d3 및 c3을 동시에로드하는 경우이 종속성으로 인해 경쟁 조건이 생성 될 수 있습니다.

c3.js

function ChartInternal(api) { 
    var $$ = this; 
    $$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined; 
    ... 
}  

당신이 문제가 해결이 D3하는 명시 적 경로를 설정하는 설정이 필요하면 설정하면.

코드

requirejs.config({ 
    paths: { 
     "d3": "modules/d3.min", 
     "c3": "modules/c3.min" 
    } 
}); 

require(["d3", "c3"], function (d3, c3) { 
    console.log(d3); 
    console.log(c3); 
}); 

콘솔

Object {version: "3.5.6", behavior: Object, event: null, ns: Object, time: Object…} 
Object {version: "0.4.10", chart: Object} 
관련 문제