d3.js下拉菜单 - 选择相关节点

Question

我有下面的代码创建一个下拉：

var arrayOfGroups = []; 

function makearray(){ 
    node.each(function(d){ 
    if(arrayOfGroups.indexOf(d.group) < 0){ 
     arrayOfGroups.push(d.group) 
    } 
    }) 
    console.log(arrayOfGroups) 
    return arrayOfGroups; 
} 

var newArray = makearray(); 

var container = document.getElementById('selectContainer') 
var dropdown = creatSelectDropDown('thisDropdown', newArray); 

dropdown.onchange = function(event) { 
    console.log(event) 
    node.style('stroke', 'white') 
    .style('stroke-width', '1px'); 

    node.filter(function(d) { 
     return d.group == event.id; 
    }) 
    .each(function(d) { 
     console.log(d) 
     console.log('d') 
    }) 
    .style('stroke', 'red') 
    .style('stroke-width', '5px') 
} 

container.appendChild(dropdown) 

function creatSelectDropDown(id, array) { 

    var dropdown = document.createElement("select"); 
    dropdown.id = id; 

    for (var i = 0; i < array.length; i++) { 
    var option = document.createElement("option"); 
    option.text = array[i]; 
    option.id = array[i]; 
    dropdown.options.add(option); 
    } 
    return dropdown; 
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

这个代码选择的节点，问题是，我想这个代码，使相关的节点到他们的ID，这就是我不能使它工作，它只有一个选项是未定义的。我希望它给我看一些其他的选项，如MAP1，MAP2，等我有以下数据：

var thisData = { 
 
\t "nodes" : [{ 
 
\t \t \t "id" : "C47676", 
 
\t \t \t "name" : "name1", 
 
\t \t \t "x" : 1209, 
 
\t \t \t "y" : 41 
 
\t \t }, { 
 
\t \t \t "id" : "C58435", 
 
\t \t \t "name" : "name2", 
 
\t \t \t "x" : 483, 
 
\t \t \t "y" : 227 
 
\t \t }, { 
 
      . 
 
      . 
 
      . 
 
     }], 
 
\t "links" : [{ 
 
\t \t \t "id" : "K14724 ", 
 
\t \t \t "name" : "name3", 
 
\t \t \t "x1" : 983, 
 
\t \t \t "y1" : 461, 
 
\t \t \t "x2" : 983, 
 
\t \t \t "y2" : 524, 
 
\t \t \t "x3" : 985, 
 
\t \t \t "y3" : 524, 
 
\t \t \t "x4" : 985, 
 
\t \t \t "y4" : 461 
 
\t \t }, { 
 
\t \t \t "id" : "K85944 ", 
 
\t \t \t "name" : "name4", 
 
\t \t \t "x1" : 983, 
 
\t \t \t "y1" : 524, 
 
\t \t \t "x2" : 983, 
 
\t \t \t "y2" : 525, 
 
\t \t \t "x3" : 985, 
 
\t \t \t "y3" : 525, 
 
\t \t \t "x4" : 985, 
 
\t \t \t "y4" : 524 
 
\t \t }, { 
 
      . 
 
      . 
 
      . 
 
     }]};

的问题是：我根据自己的ID需要帮助选择节点这不起作用，我需要一些选项，如map1，map2，而不是定义。 有什么想法可以帮助吗？

Answer 1

对于ID，而不是这样的：

function makearray(){ 
    node.each(function(d){ 
    if(arrayOfGroups.indexOf(d.group) < 0){ 
     arrayOfGroups.push(d.group) 
    } 
    }) 
    console.log(arrayOfGroups) 
    return arrayOfGroups; 
} 

你会使用ID代替组像这样：

function makearray(){ 
    node.each(function(d){ 
    if(arrayOfGroups.indexOf(d.id) < 0){ 
     arrayOfGroups.push(d.id) 
    } 
    }) 
    console.log(arrayOfGroups) 
    return arrayOfGroups; 
} 

我会建议阵列重命名为arrayOfIds因为它不是群体了。

然后在onchange我会比较d.id而不是d.group。但你在哪里比较行的错误：

return d.group == event.id; 

它这应该是：

return d.group == event.target.value; 

的target.value是选项标记的值。因为这是你想要做的，所以得到具有与你选择的值相同的ID的节点。不知道你为什么改变了这一点。你应该改变的唯一的东西是你想要比较的节点属性。

因此被视为要比较的ID应该是：

return d.id == event.target.value; 

对于MAP1，MAP2，我不知道什么youre谈论这里...