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 = {
	"nodes" : [{
			"id" : "C47676",
			"name" : "name1",
			"x" : 1209,
			"y" : 41
		}, {
			"id" : "C58435",
			"name" : "name2",
			"x" : 483,
			"y" : 227
		}, {
          .
          .
          .
        }],
	"links" : [{
			"id" : "K14724 ",
			"name" : "name3",
			"x1" : 983,
			"y1" : 461,
			"x2" : 983,
			"y2" : 524,
			"x3" : 985,
			"y3" : 524,
			"x4" : 985,
			"y4" : 461
		}, {
			"id" : "K85944 ",
			"name" : "name4",
			"x1" : 983,
			"y1" : 524,
			"x2" : 983,
			"y2" : 525,
			"x3" : 985,
			"y3" : 525,
			"x4" : 985,
			"y4" : 524
		}, {
          .
          .
          .
        }]};

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

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，我不知道你在这里谈论什么......

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

1 个答案: