なぜパイの色は変わらないのですか？

私はd3.jsの初心者です。今日、私がパイマップを描く方法を学ぶと、パイの色は変化しません。しかし、私はd3 v4の導入に応じてそれを記入します。私はこのようなパイマップを描くたいなぜパイの色は変わらないのですか？

<html> 
<head> 
<meta charset="UTF-8"> 
<title>pie map</title> 
</head> 
  
<body> 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
    <script> 
     var width = 400;   
     var height = 400;  
     var dataset = [30,10,43,55,13]; 
     var svg = d3.select("body")  
        .append("svg")  
        .attr("width",width)  
        .attr("height",height);  

     var pie=d3.pie(); 
     var piedata=pie(dataset); 
     var outerRadius=150; 
     var innerRadius=0; 

     var arc=d3.arc() 
       .innerRadius(innerRadius) 
       .outerRadius(outerRadius); 

     var color = d3.scaleOrdinal(d3.schemeCategoty10); 

     var arcs=svg.selectAll("g") 
       .data(piedata) 
       .enter() 
       .append("g") 
       .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); 


      arcs.append("path") 
       .attr("fill",function(d,i){ 
        return color[i]; //to fill color 
       }) 
       .attr("d",function(d){ 
        return arc(d); 
       }); 


      arcs.append("text") 
       .attr("transform",function(d){ 
        return "translate("+arc.centroid(d)+")"; 
       }) 
       .attr("text-anchor","middle") 
       .text(function(d){ 
        return d.data; 
       }); 
     console.log(dataset); 
     console.log(piedata); 
    </script>     
</body> 
</html>

：ここに私のコードです

が、私のはこれです：

誤りがないので、私は、混乱していますコンソールで。パイマップに色が表示されない理由を知っていますか？この問題を解決するのを手伝っていただければ幸いです。ありがとうございました！

出典

2016-12-05 Charlie

あなたのコード内の2つのエラー

var color = d3.scaleOrdinal(d3.schemeCategoty10);の代わりvar color = d3.scaleOrdinal(d3.schemeCategory10);とタイプミスがあった - Rのカテゴリ
あなたは

return color[i]; //to fill color 代わりのを使用していたが、 return color(i); //to fill color

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>pie map</title> 
 
</head> 
 
    
 
<body> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
    <script> 
 
     var width = 400;   
 
     var height = 400;  
 
     var dataset = [30,10,43,55,13]; 
 
     var svg = d3.select("body")  
 
        .append("svg")  
 
        .attr("width",width)  
 
        .attr("height",height);  
 

 
     var pie=d3.pie(); 
 
     var piedata=pie(dataset); 
 
     var outerRadius=150; 
 
     var innerRadius=0; 
 

 
     var arc=d3.arc() 
 
       .innerRadius(innerRadius) 
 
       .outerRadius(outerRadius); 
 

 
     var color = d3.scaleOrdinal(d3.schemeCategory10); 
 

 
     var arcs=svg.selectAll("g") 
 
       .data(piedata) 
 
       .enter() 
 
       .append("g") 
 
       .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); 
 

 

 
      arcs.append("path") 
 
       .attr("fill",function(d,i){ 
 
        return color(i); //to fill color 
 
       }) 
 
       .attr("d",function(d){ 
 
        return arc(d); 
 
       }); 
 

 

 
      arcs.append("text") 
 
       .attr("transform",function(d){ 
 
        return "translate("+arc.centroid(d)+")"; 
 
       }) 
 
       .attr("text-anchor","middle") 
 
       .text(function(d){ 
 
        return d.data; 
 
       }); 
 
    </script>  
 
</body> 
 
</html>

出典

2016-12-05 07:24:33 Weedoze

ああ、ありがとう~~それは動作することができます！それは私の不注意でした！ありがとうございます~~ – Charlie

私はD3をよく知らないが、あなたの問題は単純なタイプミスである可能性があります。

var color = d3.scaleOrdinal(d3.schemeCategory10);

うまくいけば、助けること：に

var color = d3.scaleOrdinal(d3.schemeCategoty10);

を変更してみてください！

出典

2016-12-05 07:16:51

エラーが解決しない – Weedoze

ご協力ありがとうございました！しかし、あなたのコードは私の問題を解決することはできません。私はこの質問をする前にあなたのコードを使います。 – Charlie

後d3.schemeCategoty10ににd3.schemeCategory10タイプミスミスを解決する2つの可能なソリューションがあります。

をあなたはスケールを除去しようとすることができ順序番号はvar color = d3.scaleOrdinal(d3.schemeCategoty10);からvar color = d3.schemeCategory10;
あなたが順序尺度としてそれをしたい場合は、return color[i];これは最初のソリューションの結果になります

return color(i);に変更する必要があります。

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>pie map</title> 
 
</head> 
 
    
 
<body> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
    <script> 
 
     var width = 400;   
 
     var height = 400;  
 
     var dataset = [30,10,43,55,13]; 
 
     var svg = d3.select("body")  
 
        .append("svg")  
 
        .attr("width",width)  
 
        .attr("height",height);  
 

 
     var pie=d3.pie(); 
 
     var piedata=pie(dataset); 
 
     var outerRadius=150; 
 
     var innerRadius=0; 
 

 
     var arc=d3.arc() 
 
       .innerRadius(innerRadius) 
 
       .outerRadius(outerRadius); 
 

 
     var color = d3.schemeCategory10; 
 

 
     var arcs=svg.selectAll("g") 
 
       .data(piedata) 
 
       .enter() 
 
       .append("g") 
 
       .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); 
 

 

 
      arcs.append("path") 
 
       .attr("fill",function(d,i){ 
 
        return color[i]; //to fill color 
 
       }) 
 
       .attr("d",function(d){ 
 
        return arc(d); 
 
       }); 
 

 

 
      arcs.append("text") 
 
       .attr("transform",function(d){ 
 
        return "translate("+arc.centroid(d)+")"; 
 
       }) 
 
       .attr("text-anchor","middle") 
 
       .text(function(d){ 
 
        return d.data; 
 
       }); 
 
    </script>  
 
</body> 
 
</html>

出典

2016-12-05 07:30:37

ありがとうございます~~しかし、あなたの紹介に推論するとまだ動作しません。また、あなたのコードを使用すると、エラーが表示されます。Uncaught TypeError：色が関数ではありません – Charlie

これはスニペットで機能しています。とにかく、2つ目の解決策を試すことができます（2つの解決策ではなく、2つの解決策を教えてください）。とにかく幸運。 –

ご協力ありがとうございます~~今、働くことができます、ありがとうございます~~ – Charlie

なぜパイの色は変わらないのですか？

答えて

関連する問題