1. ホーム
  2. 質問と答え
  3. d3 v4でコードを描画したいときに

d3 v4でコードを描画したいときに

2016-12-16 21 views
0

コードを描くときにd3 v4で問題があります。問題は 'Uncaught TypeError：g_outer.selectAll（...）。data（...）。enterは関数ではない'ということです。しかし、ソースコードがhttps://bost.ocks.org/mike/uberdata/とhttps://github.com/d3/d3/blob/master/CHANGES.md#chords-d3-chordを参照しています。私はいくつかのエラーを修正しましたが、それでも動作できません。 enter image description hered3 v4でコードを描画したいときに

が、Googleクロームで は、和音が表示されないことができます。私はこのような和音を描きたい

<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Chord char</title> 
    </head> 
      
    <body> 
     <script src="http://d3js.org/d3.v4.min.js"></script> 
        <script> 
      var city_name = [ "English" , "America" , "German" , "Japan" , "Austrilia" ]; 
      var population = [ 
          [ 1000, 3045, 4567, 1234, 3714 ], 
          [ 3214, 2000, 2060, 124 , 3234 ], 
          [ 8761, 6545, 3000, 8045, 647 ], 
          [ 3211, 1067, 3214, 4000, 1006 ], 
          [ 2146, 1034, 6745, 4764, 5000 ], 
          ]; 


      var chord_layout = d3.chord(population) 
       .padAngle(0.03) 
       .sortSubgroups(d3.descending); 


      var groups = chord_layout.sortGroups(); 
      var chords = chord_layout.sortChords(); 

      var width = 600;  
      var height = 600;  
      var innerRadius = width/2 * 0.7; 
      var outerRadius = innerRadius * 1.1; 

      var color20 = d3.scaleOrdinal(d3.schemeCategory20); 

      //add element 
      var svg = d3.select("body")  
         .append("svg")  
         .attr("width",width)  
         .attr("height",height)  
         .append("g")  
         .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

      //draw nodes 
      var outer_arc = d3.arc() 
       .innerRadius(innerRadius) 
       .outerRadius(outerRadius); 

      var g_outer = svg.append("g"); 

      //add color 
      g_outer.selectAll("path") 
       .data(groups) 
       .enter().append("path") 
       .style("fill", function(d) { return color20(d.index); }) 
       .style("stroke", function(d) { return color20(d.index); }) 
       .attr("d", outer_arc); 

      //add text 
      g_outer.selectAll("text") 
       .data(groups) 
       .enter() 
       .append("text") 
       .each(function(d,i) { 
        d.angle = (d.startAngle + d.endAngle)/2; //calculate the average of the start angle and the end angle 
        d.name = city_name[i];  //assignment for the city 
       }) 
       .attr("dy", ".35em") //width 
       .attr("transform", function(d){  //angle 
        return "rotate(" + (d.angle * 180/Math.PI) + ")" + 
        "translate(0,"+ -1.0*(outerRadius+10) +")" + 
        ((d.angle > Math.PI*3/4 && d.angle < Math.PI*5/4) ? "rotate(180)" : ""); 
       }) //to spin when the angle between 135 to 225 degrees 
       .text(function(d){ 
        return d.name; 
       }) 

       //add chord 
       var inner_chord = d3.ribbon() 
        .radius(innerRadius); 

       svg.append("g") 
        .attr("class", "chord") 
        .selectAll("path") //use the path as element 
        .attr("d", inner_chord) // 
        .style("fill", function(d) { return color20(d.source.index); }) 
        .style("opacity" ,1) 
        .on("mouseover", function(d,i){ 
         d3.select(this) 
          .style("fill","yellow"); 
        }) 
        .on("mouseout", function(d,i){ 
         d3.select(this) 
          .transition() 
          .duration(1000) 
          .style("fill",color20(d.source.index)); 
        }); 
        </script>     
    </body> 
    </html>

： はここに私のコードです。私はd3に新しいです、あなたは私を助けることができますか？あなたが私に良いアイデアを与えるなら、私はそれを感謝します！ありがとうございました！

出典

2016-12-16 Charlie

答えて

2

コードに間違いがあります。 d3.chordの機能が理解できない最大の問題です。 d3の一般的な流れは、のデータを与える前にレイアウト機能を設定することです。このようなあなたの場合：

var chord_layout = d3.chord() 
    .padAngle(0.03) 
    .sortSubgroups(d3.descending); 

var groups = chord_layout(population);

ことを固定した後、私は生成するために、あなたのコードでこのexampleをブレンド：

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Chord char</title> 
 
</head> 
 

 
<body> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
    <script> 
 
    var city_name = ["English", "America", "German", "Japan", "Austrilia"]; 
 
    var population = [ 
 
     [1000, 3045, 4567, 1234, 3714], 
 
     [3214, 2000, 2060, 124, 3234], 
 
     [8761, 6545, 3000, 8045, 647], 
 
     [3211, 1067, 3214, 4000, 1006], 
 
     [2146, 1034, 6745, 4764, 5000], 
 
    ]; 
 

 
    var chord_layout = d3.chord() 
 
     .padAngle(0.03) 
 
     .sortSubgroups(d3.descending); 
 

 
    var width = 600; 
 
    var height = 600; 
 
    var innerRadius = width/2 * 0.7; 
 
    var outerRadius = innerRadius * 1.1; 
 

 
    var color20 = d3.scaleOrdinal(d3.schemeCategory20); 
 

 
    //add element 
 
    var svg = d3.select("body") 
 
     .append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    //draw nodes 
 
    var outer_arc = d3.arc() 
 
     .innerRadius(innerRadius) 
 
     .outerRadius(outerRadius); 
 

 
    var groups = chord_layout(population); 
 

 
    var g_outer = svg.append("g") 
 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
 
     .datum(groups); 
 

 
    var group = g_outer.append("g") 
 
     .attr("class", "groups") 
 
     .selectAll("g") 
 
     .data(function(chords) { return chords.groups; }) 
 
     .enter().append("g"); 
 

 
    //add color 
 
    group.append("path") 
 
     .style("fill", function(d) { 
 
     return color20(d.index); 
 
     }) 
 
     .style("stroke", function(d) { 
 
     return color20(d.index); 
 
     }) 
 
     .attr("d", outer_arc); 
 

 
    //add text 
 
    group.append("text") 
 
     .attr("dy", ".35em") //width 
 
     .attr("transform", function(d,i) { //angle 
 
     d.angle = (d.startAngle + d.endAngle)/2; //calculate the average of the start angle and the end angle 
 
     d.name = city_name[i]; //assignment for the city 
 
     return "rotate(" + (d.angle * 180/Math.PI) + ")" + 
 
      "translate(0," + -1.0 * (outerRadius + 10) + ")" + 
 
      ((d.angle > Math.PI * 3/4 && d.angle < Math.PI * 5/4) ? "rotate(180)" : ""); 
 
     }) //to spin when the angle between 135 to 225 degrees 
 
     .text(function(d) { 
 
     return d.name; 
 
     }); 
 

 
    //add chord 
 
    var inner_chord = d3.ribbon() 
 
     .radius(innerRadius); 
 

 
    g_outer.append("g") 
 
     .attr("class", "ribbons") 
 
     .selectAll("path") 
 
     .data(function(chords) { return chords; }) 
 
     .enter().append("path") 
 
     .attr("d", inner_chord) 
 
     .style("fill", function(d) { 
 
     return color20(d.source.index); 
 
     }) 
 
     .style("stroke", "black") 
 
     .style("opacity", 0.6) 
 
     .on("mouseover", function(d, i) { 
 
     d3.select(this) 
 
      .style("fill", "yellow"); 
 
     }) 
 
     .on("mouseout", function(d, i) { 
 
     d3.select(this) 
 
      .transition() 
 
      .duration(1000) 
 
      .style("fill", color20(d.source.index)); 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-12-17 14:11:50 Mark

+0

はあなたの助けをありがとう！はい、私はd3が初めてです。あなたが私に言う前に、私は正確にd3の機能がどのように機能するのか理解していません。しかし、今、私はもっと~~を学ぶと思う。ありがとうございました！ – Charlie

関連する問題

 関連する問題