在d3.js中處理可選數據

Question

如果某些部分是可選的，您將如何處理數據？ 例如此數據：

[
    {
        width: 10,
        height: 20,
        margin: { top: 10, right: 10, bottom: 10: left: 10 }
    },
    {
        width: 10,
        height: 20
    }
]

因此，我只想在有可用margin時附加一些SVG矩形。 我可以使用可視性屬性將其隱藏，但這意味着我有不必要的節點，必須編寫null檢查代碼以避免javascript錯誤。

var svgobj = svg.selectAll('.object').data(objects);

var svgobjEnter = svgobj.enter().append('g')
    .attr('class', 'object');

svgobjEnter.append('rect')
    .attr('class', 'margin');
    .attr('width', function(d) { return d.width + d.margin.left + d.margin.right; })
    .attr('height', function(d) { return d.height + d.margin.top + d.margin.bottom; })

Answer 1

您可以過濾數據來執行以下操作：

svg.selectAll("rect")
   .data(objects.filter(function(d) { return d.margin != undefined; }))
   .enter()
   .append("rect")
// etc