D3：如何在數據綁定期間驗證數據？

Question

我想呈現一個甘特圖，我在d3中綁定我的數據並在兩端渲染圓。我的數據是有點類似這樣的結構：

function Event(start, end) { 
    this.startTime = start; 
    this.endTime = end; 
} 

我結合我的數據和往常一樣：

myplot.selectAll(".EventStart") 
     .data(EventList).enter() 
     .append("circle") 
     .attr("class", "EventStart") 
     .attr("cx", function (d) { return scaleX(d.startTime)}) 
     .attr("cy", function (d) { return eventRenderingHeight }) 
     .attr("r", 5) 
     .style("fill", "white"); 

myplot.selectAll(".EventEnd") 
     .data(EventList).enter() 
     .append("circle") 
     .attr("class", "EventEnd") 
     .attr("cx", function (d) { return scaleX(d.endTime)}) 
     .attr("cy", function (d) { return eventRenderingHeight }) 
     .attr("r", 5) 
     .style("fill", "white"); 

現在，這將使我的事件格蘭起點，也結束兩個白色的圓圈。 但我想省略渲染第二個圓如果startTime和EndTime是相同的。 我該怎麼辦？

謝謝。

Answer 1

您可以如下所示結合

myplot.selectAll(".EventEnd") 
      .data(EventList.filter(function(d){ return d.startTime!=d.endTime })) 
      .enter() 
      .append("circle")   
      .attr("class", "EventEnd") 
      .attr("cx", function (d) { return scaleX(d.endTime)}) 
      .attr("cy", function (d) { return eventRenderingHeight }) 
      .attr("r", 5) 
      .style("fill", "white"); 

OR

過濾前過濾dataList。

myplot.selectAll(".EventEnd") 
     .data(EventList) 
     .enter() 
     .append("circle") 
     .filter(function(d) { return d.startTime!=d.endTime }) 
     .attr("class", "EventEnd") 
     .attr("cx", function (d) { return scaleX(d.endTime)}) 
     .attr("cy", function (d) { return eventRenderingHeight }) 
     .attr("r", 5) 
     .style("fill", "white");