変数に値がある場合のみD3テキストラベルを表示

Question

変数に値がある場合にのみ表示するようにD3シェイプのテキスト要素を設定できますか？下のコードでは、矩形がレンダリングされますが、幅はselections（ドキュメントIDの配列）の値に応じて変化します。 selectionsが空の場合は、図形をレンダリングする必要がありますが、テキストラベルは必要ありません。今、私は$ NaNを見ています。ここでifステートメントをどこに含めるかは不明です。

Template.Box.onRendered (function() { 
    const self = this; 

    //List of variables to calculate dimensions 
    var value = //Result of calculations 
    var selections = Template.parentData(0).selections; 
    var boxContainer = d3.select("#box" + boxId) 
     .append("svg") 
     .attr("id", "svg-box"); 

    var box = boxContainer.append("rect") 
     .attr("x", start + "%") 
     .attr("y", 0) 
     .attr("height", 50) 
     .attr("width", range + "%") 
     .attr("id", "box" + boxId); 

    var boxValue = boxContainer.append("text") 
     .attr("x", boxSpace + "%") 
     .attr("y", "20px") 
     .text(value) 
     .attr("id", "low" + boxId); 

    self.autorun(function() { 
     //repeat code from above 
    }); 
}); 

Answer 1

これをテキスト属性に追加できます。

node.append("text") 
    .style("display", function (d) { return (d.data.i) ? null : "none" }) 

d.data.iがない場合、表示はnoneに設定されます。 Nullは、それが表示されることを意味します。