我正在尝试绘制甘特图,在其中将数据绑定到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/