我正在尝试绘制甘特图,在其中将数据绑定到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相同,则我想省略渲染第二个圆。
我该怎么做?

谢谢。

最佳答案

您可以在绑定前过滤dataList

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");


要么

过滤如下图所示。

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");

关于javascript - D3:如何在数据绑定(bind)期间验证数据?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35402272/

10-12 12:26
查看更多