d3.nestで作成されたデータセットが正しく描画されない

Question

私は、パンゴリン取引の主要なプレイヤーを見るためにデータセットを視覚化しようとしています。私は、各国をy軸上のカテゴリのスケールにして、x軸を日付とし、各取引インスタンスを円で表現したいと思います.xは起こった日付、yはその特定の国の位置、rはこれまでに蓄積されたインスタンスの数です（自分のデータでrとして表されます）。基本的に私のデータは2010年から2016年までのもので、パンゴリンの輸入または輸出の国名、この時点までの蓄積された貿易事例、および日付（yyyy-mm-dd）が含まれます。以下 は、私は、変数の貿易に格納私のデータの一部である：

[{"date":"2010-10-22","country":"Thailand","rank":4,"count":1},{"date":"2010-10-28","country":"Malaysia","rank":2,"count":1},{"date":"2010-11-8","country":"Thailand","rank":4,"count":2},{"date":"2010-11-18","country":"Nepal","rank":7,"count":1},{"date":"2010-11-22","country":"China","rank":5,"count":1},{"date":"2010-11-22","country":"China","rank":5,"count":2},{"date":"2010-11-27","country":"India","rank":1,"count":1},{"date":"2010-11-28","country":"India","rank":1,"count":2},{"date":"2010-11-28","country":"India","rank":1,"count":3},{"date":"2010-11-30","country":"India","rank":1,"count":4},{"date":"2010-12-17","country":"Malaysia","rank":2,"count":2},{"date":"2010-12-22","country":"Vietnam","rank":3,"count":1},{"date":"2011-01-3","country":"Nepal","rank":7,"count":2},{"date":"2011-02-12","country":"Myanmar","rank":8,"count":1},{"date":"2011-02-25","country":"Malaysia","rank":2,"count":3},{"date":"2011-02-26","country":"Malaysia","rank":2,"count":4},{"date":"2011-03-2","country":"South Africa","rank":18,"count":1},{"date":"2011-03-2","country":"Rwanda","rank":35,"count":1},{"date":"2011-03-2","country":"Mozambique","rank":22,"count":1},{"date":"2011-03-2","country":"Kenya","rank":12,"count":1},{"date":"2011-03-3","country":"China","rank":5,"count":3},{"date":"2011-02-21","country":"Vietnam","rank":3,"count":2},{"date":"2011-03-24","country":"Malaysia","rank":2,"count":5},{"date":"2011-04-4","country":"Malaysia","rank":2,"count":6},{"date":"2011-03-25","country":"India","rank":1,"count":5},{"date":"2011-03-26","country":"Malaysia","rank":2,"count":7},{"date":"2011-04-2","country":"Nepal","rank":7,"count":3},{"date":"2011-04-20","country":"Thailand","rank":4,"count":3},{"date":"2011-05-11","country":"China","rank":5,"count":4},{"date":"2011-05-11","country":"China","rank":5,"count":5},{"date":"2011-05-26","country":"Indonesia","rank":6,"count":1},{"date":"2011-05-26","country":"India","rank":1,"count":6},{"date":"2011-05-29","country":"Indonesia","rank":6,"count":2},{"date":"2011-06-6","country":"India","rank":1,"count":7},{"date":"2011-06-7","country":"Mozambique","rank":22,"count":2},{"date":"2011-06-5","country":"India","rank":1,"count":8},{"date":"2011-06-12","country":"Malaysia","rank":2,"count":8},{"date":"2011-06-13","country":"Singapore","rank":21,"count":1},{"date":"2011-06-14","country":"Malaysia","rank":2,"count":9},{"date":"2011-06-17","country":"India","rank":1,"count":9},{"date":"2011-06-19","country":"India","rank":1,"count":10},{"date":"2011-06-26","country":"Thailand","rank":4,"count":4},{"date":"2011-06-30","country":"India","rank":1,"count":11},{"date":"2011-07-4","country":"Malaysia","rank":2,"count":10},{"date":"2011-07-5","country":"Zimbabwe","rank":14,"count":1},{"date":"2011-07-12","country":"Indonesia","rank":6,"count":3},{"date":"2011-07-18","country":"Indonesia","rank":6,"count":4},{"date":"2011-07-27","country":"Nepal","rank":7,"count":4},{"date":"2011-08-16","country":"Nepal","rank":7,"count":5},{"date":"2011-08-19","country":"Namibia","rank":33,"count":1},{"date":"2011-08-23","country":"India","rank":1,"count":12},{"date":"2010-09-17","country":"Myanmar","rank":8,"count":2},{"date":"2011-09-1","country":"Zimbabwe","rank":14,"count":2},{"date":"2011-09-13","country":"Indonesia","rank":6,"count":5},{"date":"2011-09-13","country":"Malaysia","rank":2,"count":11},{"date":"2011-09-13","country":"Myanmar","rank":8,"count":3},{"date":"2011-09-21","country":"Malaysia","rank":2,"count":12},{"date":"2011-09-26","country":"Thailand","rank":4,"count":5},{"date":"2011-09-30","country":"Indonesia","rank":6,"count":6},{"date":"2011-10-1","country":"Sri Lanka","rank":19,"count":1},{"date":"2011-10-6","country":"India","rank":1,"count":13},{"date":"2011-10-7","country":"India","rank":1,"count":14},{"date":"2011-10-18","country":"Indonesia","rank":6,"count":7},{"date":"2011-10-18","country":"Indonesia","rank":6,"count":8},{"date":"2011-10-18","country":"Indonesia","rank":6,"count":9},{"date":"2011-10-22","country":"India","rank":1,"count":15},{"date":"2011-10-24","country":"India","rank":1,"count":16},{"date":"2011-11-28","country":"United States","rank":32,"count":1},{"date":"2011-12-15","country":"Vietnam","rank":3,"count":3},{"date":"2011-12-27","country":"Thailand","rank":4,"count":6},{"date":"2012-01-4","country":"Philippines","rank":15,"count":1},{"date":"2012-01-5","country":"Kenya","rank":12,"count":2},{"date":"2012-01-6","country":"Philippines","rank":15,"count":2},{"date":"2012-01-17","country":"Philippines","rank":15,"count":3},{"date":"2012-01-24","country":"China","rank":5,"count":6},{"date":"2012-02-22","country":"Malaysia","rank":2,"count":13},{"date":"2012-03-1","country":"Malaysia","rank":2,"count":14},{"date":"2012-03-19","country":"Pakistan","rank":11,"count":1},{"date":"2012-03-21","country":"Malaysia","rank":2,"count":15},{"date":"2012-03-23","country":"Vietnam","rank":3,"count":4},{"date":"2012-04-27","country":"Vietnam","rank":3,"count":5},{"date":"2012-04-23","country":"Belgium","rank":31,"count":1},{"date":"2012-06-7","country":"Thailand","rank":4,"count":7},{"date":"2012-06-7","country":"Thailand","rank":4,"count":8}]; 

、ここでは私のコードです：

var margin = {left:120, top:20, right:0, bottom:50}; 
    var width = 1000; 
    var height = 800; 


    var data=trade; 


    var tradeByCountry = d3.nest() 
     .key(function(d) { return d.country; }) 
     .entries(trade); 

     console.log(tradeByCountry); 

     tradeByCountry.forEach(function(country){ 
     country['number']=country.values.length; 
     console.log(country); 
     }); 


     var country_colors = ["#393b79","#5254a3", '#6b6ecf', '#9c9ede', '#637939', '#8ca252','#b5cf6b','#cedb9c', 
     '#8c6d31','#bd9e39','#e7ba52','#e7cb94','#843c39','#ad494a','#d6616b','#e7969c','#7b4173','#a55194', 
     '#ce6dbd','#de9ed6', '#9467bd', '#c5b0d5','#3182bd', '#6baed6','#17becf','#9edae5','#e6550d','#fd8d3c','#fdae6b', 
     '#31a354','#74c476','#a1d99b','#d62728','#ff9896','#7f7f7f','#c7c7c7']; 


     var colors = d3.scale.ordinal() 
        .domain(d3.range(tradeByCountry.length)) 
        .range(country_colors); 




     tradeByCountry.sort(function(x, y){ 
      return d3.descending(x.number, y.number); 
     }) 


     var countriesArray = []; 


     tradeByCountry.forEach(function(country){ 
      countriesArray.push(country.key); 

     }); 

     console.log(countriesArray); 


     var x = d3.time.scale() 
     .rangeRound([0, width]); 

     var y = d3.scale.linear() 
      .range([height, 0]); 


     var timeFormat = d3.time.format("%Y-%m-%d"); 

     x.domain([timeFormat.parse('2010-10-22'),timeFormat.parse('2016-12-30')]); 
     y.domain(countriesArray); 


     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     var svg = d3.select("body").append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis) 
      .append("text") 
       .attr("class", "label") 
       .attr("x", width) 
       .attr("y", -6) 
       .style("text-anchor", "end") 
       .text("date"); 

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
      .append("text") 
       .attr("class", "label") 
       .attr("transform", "translate(35,-25)") 
       .attr("y", 6) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text("countries"); 



      svg.selectAll(".dot") 
      .data(tradeByCountry) 
      .enter().append("circle") 
       .attr("class", "dot") 
       .attr("r", 7) 
       .attr("cx", function(d) { return 0; }) 
       .attr("cy", function(d,i) { return (height/tradeByCountry.length)*i; }) 
       .style("fill", function(d,i) { return colors(i); }); 


      svg.selectAll("text.labels") 
       .data(tradeByCountry) 
       .enter() 
       .append("text") 
       .text(function(d) {return d.key}) 
       .attr("x", 0) 
       .attr("y", function(d,i) { return (height/tradeByCountry.length)*i; }) 
       .attr("transform", "translate(-120,5)") 
       .attr("fill",function(d,i) { return colors(i); }); 


       svg.selectAll('.line') 
       .data(tradeByCountry) 
       .enter().append('line') 
       .attr("x1", 0)  // x position of the first end of the line 
       .attr("y1",function(d,i) { return (height/tradeByCountry.length)*i; }) 
       .attr("x2", width)  // x position of the second end of the line 
       .attr("y2", function(d,i) { return (height/tradeByCountry.length)*i; }) 
       .style("stroke",function(d,i) { return colors(i); }) 
       .attr("id", function(d){return d.key}); 



      //PROBLEM HERE!!!!!!!!!!! 
       var g = svg 
       .selectAll("g") 
       .data(tradeByCountry) 
       .enter().append("g")   
       .selectAll(".dot") 
       .data(function(d) {return d.values;}) 
       .enter().append("circle") 
       .attr("id", function(d){ return d.count;}) 
       .attr("r", function(d){return d.count;}) 
       .attr("cx", function(d,i) { console.log (d.date);return (x(timeFormat.parse(d.date))); }) 
       .attr("cy", function(d,i) { return (height/tradeByCountry.length)*i; }) 
       .style("fill", function(d,i) { return colors(i); }); 

私は自分のコードの非常に最後の部分で特異的に問題を抱えています、私はすべての円を描くことができず、正確なrではなく、国が時間の経過とともに貿易が蓄積するにつれてrを増やしたいのではなく、rは国によって異なると思われます。

Answer 1

最初にあなたの例の2つのもの.selectAll("g")は、エラーがあるとマークした時点で、軸のg要素をピックアップしていたため、最初の数か国はデータを表示していませんでした。これはあなたのスクリーンショットのようには見えませんが、あなたが投稿したコードを考えれば起こっていたので、を.countryクラスで修飾しました。

.attr("cy", function(d,i) { return (height/tradeByCountry.length)*i; }) 

私はあなたがインデックスここで、変数iはまだtradeByCountryアレイに縛られていたと思った推測している、それがあったであろう：

二つ目、そして何があなたの特定の問題は、この行だった原因となりましたselectAll("g.country").data(tradebyCountry)の後になりましたが、今度は各国のデータについてd.valuesにネストされた選択.selectAll(".dot")を作成しました。iはこれらの値のリストをインデックスに追加しています。上記のコード行は、各国の値をとり、常に上の行から開始します。実際には、国ごとに区切られた同じ行に配置する必要があります。各行の色が一致していたので

What you wanted (I = India, M = Malaysia, T = Thailand) 
I--- I0  I1  I2 
M---  M0M1      M2 
T---   T0 T1  T2 

What you were getting 
I--- I0 M0 T0 
M---  M1 I1 T1 
T---      I2 T2  M2 

これも事実.ATTR（「塗りつぶし」）によって隠されたも（私はそれを修正する代わりにd.rankを使用しました）同じ間違いを持っ​​ていました。

解決方法1：あなたは、ネストされた選択を行う前に、それが正しい量で各g要素をオフセットします。このような国のことをいうので、値が同じ正しい回線使用iにとどまることを確認する：

.attr("transform", function(d,i) { 
     return "translate(0,"+(height/tradeByCountry.length)*i+")"; 
    }) 

と、単にあなたがこのg要素に追加するすべてのもののためにゼロになるようにcyを設定し、それらはすべて一直線になるだろう（と右ライン上）ここでの問題で

完全なコード！舞台：

var g = svg 
        .selectAll("g.country") 
        .data(tradeByCountry) 
        .enter().append("g") 
        .attr("class", "country") 
        .attr("transform", function(d,i) { 
         return "translate(0,"+(height/tradeByCountry.length)*i+")"; 
         }) 
        .selectAll(".dot") 
        .data(function(d) {return d.values;}) 
        .enter().append("circle") 
        .attr("class", "dot") 
        .attr("id", function(d){ return d.country+"_"+d.date+"_"+d.count;}) 
        .attr("r", function(d){ return d.count;}) 
        .attr("cx", function(d,i) { console.log (d.date);return (x(timeFormat.parse(d.date))); }) 
        .attr("cy", function(d,i) { return 0; }) 
        .style("fill", function(d,i) { return colors(d.rank); }); 

http://jsfiddle.net/d4typ567/1/

解決策2：それはまた、ほとんどのD3 .ATTRと.style関数に渡すことができるd3は、ネストされた選択のための親のインデックス変数を保持する場合（通常はiiを示す）です、 .attr("cy", function(d,i, ii) { return (height/tradeByCountry.length)*ii; })を代わりに使用できますが、g要素のオフセットは1回の操作にすぎませんが、これはすべての円に対して実行されます。カラー（塗りつぶし）機能についても同じことを忘れないでください。