D3中的过滤选项

时间:2013-06-19 06:32:45

标签: javascript jquery graph d3.js rickshaw

我正在研究D3(Rickshaw框架),我必须使用名称过滤数据。

以下是人力车用于创建圆圈的代码。

var nodes = graph.vis.selectAll("path").data(series.stack.filter(function(d) {
    return d.y !== null
})).enter().append("svg:circle").attr("cx", function(d) {
    return graph.x(d.x)
}).attr("cy", function(d) {
    return graph.y(d.y)
}).attr("fill-opacity", 1.0).attr('transform', 'translate(22,0)').attr("r", function(d) {
    return ("r" in d) ? d.r : graph.renderer.dotSize
});

我尝试过滤数据,如

$('#BestBrands input').on("change", function () {   
    console.log("called")
    var selected = $(this).attr('name'),
        display = this.checked ? "inline" : "none";
    console.log(selected)

    graph.vis.selectAll(".filter")
        .data(series.stack.filter(function(d) {
            return series.name[0] == selected
        }))    
        .attr("display", display);
});

// series.name等于d3.js中的d.name,所以series [0]是第一个坐标名称 它不起作用。我是否需要在课堂上附加任何课程?我不清楚这一点。我该怎么做才能根据名称过滤数据?

2 个答案:

答案 0 :(得分:1)

如果我理解你的代码:

graph.vis.selectAll("path")
  .data(series.stack.filter(function(d){
        //should return a boolean
        return selected === 'something';
       }))
    .attr("display", display);
});

编辑:

$('#BestBrands input').on("change", function () {   
    console.log("called")
    var selected = $(this).attr('name'),
        display = this.checked ? "inline" : "none";
    console.log(selected)

    graph.vis.selectAll(".filter")
        .data(series.stack.filter(function(d) {
            return series[0].name == selected //assuming series[] is an array
        }))    
        .attr("display", display);
});

答案 1 :(得分:0)

看起来您打算使用var selected = $(this).attr('name'),但绝不会将其与任何内容进行比较。

在这一行:

series.stack.filter(function(d){ return d.selected })

我怀疑您要将d.selectedselected进行比较。现在,这只是我假设(并且你知道他们对假设的看法),但鉴于我对D3的经验,series.stack.filter会迭代series.stack中的元素,所以你需要确保d.selected是您想要的属性。