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.filter(callback[, thisObject])

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

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

1 个答案: