如何在 d3.js 中将形状转换为另一种形状

Question

我刚刚开始使用 d3.js（大约 1.5 周）。我想知道——大多数例子都使用了一些类似的模式

mysvg.selectAll("rect").data(mydata,key).transition()...;

现在我的代码如下所示。我希望能够将时间序列绘制为特定时间之后的点和线（如果它们在特定时间之前）的矩形。我知道可以将它们作为一个系列并应用过滤器，但我想知道是否有更好的方法可以使用一个 select 语句来绘制系列。

如果没有，我该如何使用过滤器来实现它？特别是，我对如何使用出口感到困惑，以便随着时间的增加，条形消失。我已经尝试了几种不同的方式来调用 .exit().remove()，但它似乎不起作用。

function drawChart(svgarea,mydata,key)
{   

var g = svgarea.append("svg:g");


var rects = g.selectAll("rect").data(mydata,key).enter().append("rect");
var lines = g.selectAll("line").data(mydata,key).enter().append("line");

drawAxis();

chartData = [];
chartData.redraw = function(timeIndex)
{                       
    rects.filter(function(d){
            var isAfter =  ...;
            return isAfter;})
        .transition().duration(500)
                    .attr(...,...);});  
    lines.filter(function(d){
            var isBefore =  ...;
            return isBefore;})
        .transition().duration(500)
                    .attr(...,...);});
    rects.exit().remove();  
}
chartData.redraw(0);
return chartData;
}

注意：我这样设置是因为数据是非静态的。这个小图表的用户将在数据更新后调用 chart.redraw()（至少是这样的想法）

Answer 1

您应该在将数据加入您的选择之前拆分数据。请记住，d3 中的许多迭代方法，包括 filter，都是基于 JavaScript 中 Array 对象提供的方法。

rectData = myData.filter(function(d) { /* filter conditions */ }
lineData = myData.filter(function(d) { /* filter conditions */ }

更多信息：array.@987654321@(callback[, thisObject])

然后，您可以只关注update 和enter()，而不必在每次重绘时过滤数据。