Question

这是我的数据（JSON），数据是这样的150,000多行。我正在使用这些数据绘制D3中节点和节点之间的线，我有非常好的代码。

"nodes" : [{
            "id" : "r75832",
            "name" : "name1",
            "x" : 1209,
            "y" : 41
        }, {
            "id" : "q26475",
            "name" : "name2",
            "x" : 483,
            "y" : 227
        }, 
.
.
.

"links" : [{
            "id" : "abc ",
            "name" : "t5.4.6.2 , 4.5.0.7, p00738",
            "x1" : 348,
            "y1" : 341,
            "x2" : 349,
            "y2" : 340,
            "x3" : 351,
            "y3" : 340,
            "x4" : 350,
            "y4" : 341
        }, {
            "id" : "def ",
            "name" : "a1.2.3.4 , 6.7.8.9, b00574",
            "x1" : 349,
            "y1" : 340,
            "x2" : 349,
            "y2" : 339,
            "x3" : 351,
            "y3" : 339,
            "x4" : 351,
            "y4" : 340
        },
.
.
.

我还有一段代码可以创建一个下拉菜单：

'E met' : {
  'a met' : {
    'M00175 name1' : {},
   },
  'b met' : {
    'M00567 name2' : {},
    'M00174 name3' : {},
   },

.
.
.
}

我想要的是，当有人点击M00174时，在下拉菜单中我想要突出显示一些节点，当有人点击M00567时，其他一些节点将被突出显示属于M00567，依此类推。

我在这一点上陷入困境，如何定义特定的数据片段，使其在150,000多行代码中突出显示，以及如何突出显示它们。有什么想法吗？

Answer 1

我这样做的方法就是在更改下拉列表时调用函数。然后循环节点以给它们一个边框（突出显示）。

这是我放在一起的小提琴：https://jsfiddle.net/reko91/dFK3K/287/

首先，我创建了这组数据中所有不同组的数组：

var arrayOfGroups = [];

function makearray() {

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

这基本上是通过每个节点进行的，如果我创建的数组没有得到该组，则会将该组推入其中。

然后我根据这个数组创建一个下拉列表：

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.value = array[i];
    dropdown.options.add(option);
  }


  return dropdown; //return drop down list
}

获取容器（我在html中添加了一个div）：

var container = document.getElementById('selectContainer')

获取生成的下拉列表：

var dropdown = creatSelectDropDown('thisDropdown', newArray);

将此创建的选择下拉到容器：

container.appendChild(dropdown)

然后创建了一个on change函数：

dropdown.onchange = function(event) {
  console.log(event)
  node.style('stroke', 'white') //this is to set all nodes to default stroke
    .style('stroke-width', '1px');

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

这样做是获取select on change的值，使用此值来过滤具有等于该值的组的节点。

就是这样。更改下拉列表时，它会获取下拉列表中选项的值，将节点过滤为具有等于选项标记的组的节点，并向所有节点添加笔划：）

D3根据部分数据突出显示

1 个答案: