使用d3.js检查svg元素的DOM属性

时间:2013-08-21 18:51:19

标签: d3.js

我试图通过执行此操作来运行搜索操作后传递成功或失败消息

// Search operation starts here
    $('#search').click(function () {
        var searchVal = $('#searchBox').val();
        var zipVal = d3.selectAll('.node').attr('zipcode');
        if (searchVal == zipVal) {
            alert('success');
        } else {
            alert('failed');
        }
    });

如果条件匹配,则传递成功消息,否则失败消息 这是小提琴

http://jsfiddle.net/sghoush1/DHATQ/11/

2 个答案:

答案 0 :(得分:1)

您还可以使用d3的查询选择器功能来确定节点是否符合该条件,如下所示:

var zipVal = d3.selectAll('.node[zipcode="' + searchVal + '"]');
if (zipVal[0].length > 0) {      
  alert('success');
} else {
    alert('failed');
}

这也允许您仅对符合条件的节点应用转换,例如突出显示与搜索词匹配的节点等。

来源:https://github.com/mbostock/d3/wiki/Selections

答案 1 :(得分:0)

您无法选择所有zipcode的属性.node,我理解您的代码尝试做的是搜索邮政编码并查看它是否存在于节点中?然后正确的代码是:

$('#search').click(function () {
    var searchVal = $('#searchBox').val();
    var zipVal = d3.selectAll('.node').attr('zipcode');
    if (data.map(function(d) {return JSON.parse(d.zip_code.human_address).zip; }).indexOf(searchVal) != -1) {
        alert('success');
    } else {
        alert('failed');
    }
});