d3 plotに配列の最初の項目がありません

Question

私は本当にこれで苦労しています。私は、d3ライブラリを使用してJavaScriptでドットプロットを作成しています。実際にプロットされている点をフィルタリングして、後でハイライトというデータセットの列に指定されたいくつかのテキストフィールドにテキストフィールドを追加できるようにしたいと思います。テストのように、「はい」とマークされたサークルをプロットするだけですが、最終的にすべてのサークルをプロットします。私は実際のプロットコードを含んでいますが、私はデータ構造がOKであると確信しています。次のコードは、私が期待する円をプロットしています。

var category = plot.selectAll("."+media+"category") 
     .data(plotData) 
     .enter() 
     .append("g") 
     .attr("transform", function (d) {return "translate(0," + yScale(d.key) + ")"; }) 
     .attr("class", media+"category") 
     .call(function(parent){ 
    parent.append('text') 
     .attr("class", media+"Subtitle") 
     .attr("x",margin.left) 
     .attr("y",0) 
     .text(function(d){return d.key}) 

    parent.selectAll('circles') 
    .data(function(d){ 
     //console.log("object= ",d) 
     let filtered=d.values.filter(function(d){ 
      return d.highlight=="yes" 
     }) 
     //console.log("circles filtered ", filtered) 
     return filtered 
    }) 
    .enter() 
    .append('circle') 
    .attr("class",function(d,i){ 
     if(d.highlight=="yes"){ 
      return media+"highlight" 
     } 
     else {return media+"fill"} 
    }) 
    .attr("id",function(d){return d.name +" "+d.value+ " "+d.size}) 
    .attr("cx",function(d){return xScale(d.value)}) 
    .attr("cy",yScale.rangeBand()*.4) 
    .attr("r", function(d) { 
     if (size) {return d.size*(yScale.rangeBand()*.003 )} 
     else {return yOffset/2} 
    }) 
    .attr("transform", function (d) {return "translate("+(margin.left)+","+(0)+")"}) 
    .style("fill",colours[0]) 

プロットは次のようになります。

私はテキストを追加しようとすると、問題が来ます。私は使用するデータ構造の配列を作成するデータをフィルタリングするのにまったく同じフィルタを使用しています。しかし何らかの理由で、最初のオブジェクトは配列内にあるものの、プロットされません。 、どんなに彼らがプロットされているように、私は「はい」とセットで定義どのように多くの円

：私の改訂版のコードは次のようになります。

var category = plot.selectAll("."+media+"category") 
     .data(plotData) 
     .enter() 
     .append("g") 
     .attr("transform", function (d) {return "translate(0," + yScale(d.key) + ")"; }) 
     .attr("class", media+"category") 
     .call(function(parent){ 

     parent.append('text') 
      .attr("class", media+"Subtitle") 
      .attr("x",margin.left) 
      .attr("y",0) 
      .text(function(d){return d.key}) 

     parent.selectAll('circles') 
     .data(function(d){ 
      //console.log("object= ",d) 
      let filtered=d.values.filter(function(d){ 
       return d.highlight=="yes" 
      }) 
      //console.log("circles filtered ", filtered) 
      return filtered 
     }) 
     .enter() 
     .append('circle') 
     .attr("class",function(d,i){ 
      if(d.highlight=="yes"){ 
       return media+"highlight" 
      } 
      else {return media+"fill"} 
     }) 
     .attr("id",function(d){return d.name +" "+d.value+ " "+d.size}) 
     .attr("cx",function(d){return xScale(d.value)}) 
     .attr("cy",yScale.rangeBand()*.4) 
     .attr("r", function(d) { 
      if (size) {return d.size*(yScale.rangeBand()*.003 )} 
      else {return yOffset/2} 
     }) 
     .attr("transform", function (d) {return "translate("+(margin.left)+","+(0)+")"}) 
     .style("fill",colours[0]) 

     parent.selectAll('text') 
     .data(function(d){ 
      console.log("object= ",d) 
      let filtered=d.values.filter(function(d){ 
       return d.highlight=="yes" 
      }) 
      console.log("text filtered ", filtered) 
      return filtered 
     }) 
     .enter() 
     .append('text') 
     .attr("x",function(d){ 
        return xScale(d.value)+(margin.left); 
        }) 
        .attr("y",function(d){ 
        return yScale.rangeBand()*.4; 
        }) 
        .text(function(d){ 
         return d.name+' '+d.size 
        }) 
        .attr("class",media+"subtitle") 

が、プロットは次のようになりません最初の円には常にラベルがありません。私は、データがどこかに突然変異していると推測していますが、どこで把握できません。私はまた、サークルの前にまずテキストをプロットしようとしましたが、結果は常に同じです。

これは.dataのaraayは、私は誰もが持っていることを任意の洞察力をいただければと思い、それの最初の項目

[Object, Object, Object, Object] 
dot-plot.js:104 object= Object {key: "Endland", values: Array[22]} 
dot-plot.js:108 text filtered [Object, Object]0: Objectgroup: "Endland"highlight: "yes"name: "Manchester City"size: "95.65695168"value: "55097"__proto__: Object1: Objectgroup: "Endland"highlight: "yes"name: "Stoke"size: "9.13121722"value: "27743"__proto__: Objectlength: 2__proto__: Array[0] 
dot-plot.js:104 object= Object {key: "Spain", values: Array[44]} 
dot-plot.js:108 text filtered [Object, Object, Object]0: Objectgroup: "Spain"highlight: "yes"name: "Barcelona"size: "47.32724506"value: "100000"__proto__: Object1: Objectgroup: "Spain"highlight: "yes"name: "Deportivo de La Coru_a"size: "59.93202583"value: "34600"__proto__: Object2: Objectlength: 3__proto__: Array[0] 
dot-plot.js:104 object= Object {key: "Italy", values: Array[22]} 
dot-plot.js:108 text filtered [Object] 
dot-plot.js:104 object= Object {key: "Germany", values: Array[20]} 
dot-plot.js:108 text filtered [Object, Object] 

を持っていることを示すコンソールから出力されます。本当に冗長であるために申し訳ありませんが、私はjs.fiddle使ったことがないか、私は

おかげ例を置くところ

Answer 1

あなたが行うと、この：

parent.append('text') 
     .attr("class", media+"Subtitle") 
     .attr("x",margin.left) 
     .attr("y",0) 
     .text(function(d){return d.key}); 

あなたはtext要素を作成していますSVG（あなたのケースでは、サブタイトル）。したがって、後で行うとき：

parent.selectAll('text')//here you select ALL text elements 
    .data(function(d){ 
     console.log("object= ",d) 
     let filtered=d.values.filter(function(d){ 
      return d.highlight=="yes" 
     }) 
     console.log("text filtered ", filtered) 
     return filtered 
    }) 
    .enter() 
    .append('text'); 

この前のテキスト（字幕）を選択しています。したがって、入力選択には1つの要素が少なくなります。

ソリューション：

parent.selectAll('.somethingElse')//here you don't select existing elements 
    .data(function(d){ 
     console.log("object= ",d) 
     let filtered=d.values.filter(function(d){ 
      return d.highlight=="yes" 
     }) 
     console.log("text filtered ", filtered) 
     return filtered 
    }) 
    .enter() 
    .append('text')