1. 首頁
  2. 問答
  3. d3 v4中的一些問題當我想繪製一個和絃時

d3 v4中的一些問題當我想繪製一個和絃時

2016-12-16 27 views
0

當我繪製一個和絃時，我在d3 v4中遇到了一些問題。問題是'Uncaught TypeError：g_outer.selectAll（...）。data（...）。enter「不是我的代碼中的第53個函數。但是當我看到源代碼參考https://bost.ocks.org/mike/uberdata/和https://github.com/d3/d3/blob/master/CHANGES.md#chords-d3-chord。我修改了一些錯誤，但仍然無法正常工作。 這裏是我的代碼：d3 v4中的一些問題當我想繪製一個和絃時

<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>

我要畫這樣的弦： enter image description here

但在谷歌Chrome，弦不能出現。我是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

相關問題

 相關問題