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

Question

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

// 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/

Answer 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

Answer 2

你不能选择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');
    }
});