仅当变量有值时才显示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" })

如果没有.data.i，则其显示设置为无。空表示将显示。