2016-07-13 2 views
27

私はこのc3.jsコードをjsfiddle(https://jsfiddle.net/varunoberoi/mcd6ucge)から試しましたが、私のlocalhostでは動作しません。C3JS - 未定義の 'category10'プロパティを読み取ることができません

私は自分のサーバーとしてuniserverを使用しています。私はすべてをコピー・ペーストしますが、それは機能しません。私は開発者ツールコンソールをチェックしたときに、私が得たもの

<html> 
    <head> 
     <!-- CSS --> 
     <link href="css/c3.css" rel="stylesheet" type="text/css" /> 

     <!-- JAVASCRIPT --> 
     <script src="js/d3.min.js" type="text/javascript"></script> 
     <script src="js/c3.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      window.onload=function(){ 
       var chart = c3.generate({ 
        data: { 
         columns: [ 
          ['data1', 300, 350, 300, 0, 0, 0], 
          ['data2', 130, 100, 140, 200, 150, 50] 
         ], 
         types: { 
          data1: 'area', 
          data2: 'area-spline' 
         } 
        }, 
        axis: { 
         y: { 
          padding: {bottom: 0}, 
          min: 0 
         }, 
         x: { 
          padding: {left: 0}, 
          min: 0, 
          show: false 
         } 
        } 

       }); 
      } 
     </script> 
    </head> 
    <body> 
     <div id="chart"></div> 
    </body> 
</html> 

これです:

c3.js:5783 Uncaught TypeError: Cannot read property 'category10' of undefined 

私はc3.js何もの異なるバージョンを試してみました。それは私の地元ではなくjsfiddleで働いているので変です。

+1

両方のライブラリの絶対パス全体を指定してください。コードを身体の最後まで動かすことも良い考えです。 –

+1

いくつかの組み合わせを実行すると、動作していないd3.jsパスが判明します。私はlocalhostパスとC:ドライブパス全体を提供しようとしましたが、まだ動作していません。私が得た解決策は、外部URL(http://d3js.org/d3.v3.js)を使用することです。私はそれがどのように働いているのか分からないが、ええ、今働いている。あなたの考えに感謝します。 :) – JJC

+3

それは価値があるので、別のプロジェクトでD3.js v4(4.1.1)からv3(3.5.17)にダウングレードすることで、まったく同じJSエラーを解決しました。 –

答えて

71

D3.js v4(4.1.1)からv3(3.5.17)にダウングレードして、別のプロジェクトで同じJavaScriptエラーを解決しました。

それは2016年7月、does not support D3.js v4のようC3.js、ことが判明:

は、それは間違いなくそのままである4.0 [D3.js]で動作しません。 D3 v4はまったく異なる名前空間を持ち、下位互換性がありません。 v4へのアップデートは非常に簡単な作業です。

+7

バージョンはhttps://github.com/d3/d3/releases/tag/v3.5.17で入手できますか?あなたの答えをありがとう、それはたくさんの助けになりました。 – agoldev

+0

npmを使用せず、D3のレール宝石を使用している場合、このコードをgemファイルに追加すると、 'gem 'd3-rails'、 '〜> 3.5.17'' – Brandt

+0

https://rubygems.org/ gems/d3-rails/versions/3.5.17 また、私は上記のコメントで参照しているgemのバージョンへのリンクです。 – Brandt

5

C3.jsはD3 v3に基づいており、D3 v4で実行しようとするとエラーが発生するためです。

エラーは、コードの行の下に発生する:

pattern = notEmpty(config.color_pattern) ? 
    config.color_pattern : d3.scale.category10().range() 

d3.scale.category10().range()d3.scaleOrdinal(d3.schemeCategory10)として使用されるべきであるが、C3.jsを実行することができないようにD3 v4では、コードのこの部分だけを変更することは意味がありません。


誰かがD3 v4 +で作業する必要がある場合は、https://naver.github.io/billboard.js/を試してください。

billboard.jsは、D3 v4 +サポートと同じインターフェイスを持つC3.jsの分岐プロジェクトです。

+1

このリンクは質問に答えるかもしれませんが、答えの本質的な部分をここに含めて参考にしてください。リンクされたページが変更された場合、リンクのみの回答は無効になります。 - [レビューから](/レビュー/低品質の投稿/ 18821943) –

関連する問題