d3 Textelement hinzufügen, wenn Wert in Daten vorhanden ist

Question

Ich habe eine Bibliothek zum Anzeigen von Zeitleisten. Abhängig von den Daten, die Sie in die Bibliothek eingeben, möchte ich Elemente anzeigen oder nicht, wenn die Daten einen bestimmten Wert enthalten.

Beispiel ohne number Wert:

var labelColorTestData = [ 
    {label: "person a", times: [{"color":"green", "label":"Weeee", "starting_time": 1355752800000, "ending_time": 1355759900000}, {"color":"blue", "label":"Weeee", "starting_time": 1355767900000, "ending_time": 1355774400000}]}, 
    {label: "person b", times: [{"color":"pink", "label":"Weeee", "starting_time": 1355759910000, "ending_time": 1355761900000}, ]}, 
    {label: "person c", times: [{"color":"yellow", "label":"Weeee", "starting_time": 1355761910000, "ending_time": 1355763910000}]} 
    ]; 

Beispiel mit number Wert:

var testData = [ 
      {times:[ 
       {"id": "day1", "label": "DAY", "number": "1", "starting_time": 1, "ending_time": 86400}, 
       {"id": "day2", "label": "DAY", "number": "2", "starting_time": 86400, "ending_time": 86400*2}, 
       {"id": "day3", "label": "DAY", "number": "3", "starting_time": 86400*2, "ending_time": 86400*3}, 
       {"id": "day4", "label": "DAY", "number": "4", "starting_time": 86400*3, "ending_time": 86400*4}, 
       {"id": "day5", "label": "DAY", "number": "5", "starting_time": 86400*4, "ending_time": 86400*5} 
      ]}, 
    ]; 

Ich möchte ein Textelement hinzufügen, wenn die number Variable existiert. Der folgende Code fügt immer ein Textelement hinzu.

g.selectAll("svg").data(data).enter() 
         .append("text") 
         .attr("class", "textnumbers") 
         .attr("id", (d) => (d.id)) 
         .attr("x", (d, i) => getXTextPos(d, i, d.number, '.textnumbers')) 
         .attr("y", getStackTextPosition) 
         .text(function(d) { 
          return d.number; 
         }) 
         .on("click", function(d, i){ 
          // when clicking on the label, call the click for the rectangle with the same id 
          var point = d3.mouse(this); 
          var id = this.id; 
          var selectedLabel = d3.select(this).node(); 
          var selector = "rect#" + id; 
          var selectedRect = d3.select(selector).node(); 
          click(d, index, datum, selectedLabel, selectedRect, xScale.invert(point[0])); 
         }) 
        ; 

Wie füge ich das Textelement, wenn number in den Ausgangsdaten vorhanden ist, und nicht, wenn es nicht?

Danke!

Answer 1

nach data(data).enter() Paste diese Linie

.filter(function(d) { return d.number !== undefined; })