D3 图节点上的搜索功能

Question

所以我生成了一个包含四层的 JSON 文件，并使用 D3.js 的折叠框格式 (https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460) 来创建可视化。

我遇到的问题是，由于 JSON 文件太大，可视化甚至不会加载到 HTML 中，即使加载，可视化中的框也会滞后并且不会按应有的方式折叠。

因此，我想在 HTML 中使用 Select2 的下拉框创建一个搜索表单，以便用户可以输入节点/第 1 层值，并且可视化将仅显示该特定部门。由于我不擅长 Javascript，我发现创建这样的搜索功能非常困难。我已经为 JSON 中的每个值分配了 ID 号，但我不确定如何进一步处理它（如果这甚至是正确的方向）。

以下是我的 JSON 代码示例。因此，例如，如果用户输入 Lawyer 和 McDonald's，我希望可视化仅显示该节点及其子节点。如果我不清楚，我很抱歉，但任何帮助都会很棒。非常感谢！

{ "tree": { "name": "Top Level", "children": [ { "name": "[('Lawyer', 'McDonald's')]", "children": [ { "name": "[('Doctor', 'Wendy's')]", "percentage": "10%", "duration": 5, "children": [ { "name": "[('Nurse', 'NYU')]", "percentage": "1%", "duration": 5, "children": [ { "name": "[('Pharmacist', 'LIU')]", "percentage": "4%", "duration": 5, "id": "1.1.1.1" }, { "name": "[('PA', 'Wagner')]", "percentage": "4%", "duration": 5, "id": "1.1.1.2" } ], "id": "1.1.1" }, { "name": "[('Surgeon', 'Harvard')]", "percentage": "1%", "duration": 3, "children": [ { "name": "[('Dentist', 'Buffalo')]", "percentage": "1%", "duration": 4, "id": "1.1.2.1" } ], "id": "1.1.2" } ], "id": "1.1" } ], "id": "1" }, {

Answer 1

在您真正使 D3 可视化正常工作之前，需要进行一些更改。这是他们。

(1) json的数据结构与显示的D3代码不匹配。如果您想在折叠框中显示 json 数据，请正确调整以下代码部分。 d 这里对应你的 children 对象并且有属性；名称、百分比和持续时间

.append('xhtml').html(function(d) {
  return '<div style="width: '
    + (rectNode.width - rectNode.textMargin * 2) + 'px; height: '
    + (rectNode.height - rectNode.textMargin * 2) + 'px;" class="node-text wordwrap">'
    + '<b>' + d.name + '</b><br><br>'
    + '<b>Percentage: </b>' + d.percentage + '<br>'
    + '<b>Duration: </b>' + d.duration + '<br>'
    + '</div>';
});

(2) 您的数据不包含以下内容，这些内容负责在将项目折叠到父框时正确显示箭头。这可能就是动画不符合预期的原因。

"link" : {
    "name" : "Link node 1 to 2.3",
    "nodeName" : "NODE NAME 2.3",
    "direction" : "ASYN"
},

(3)这是实现带有所有主要分支的select2下拉框所需的添加。

HTML

<select class="js-example-basic-single" name="state">

JavaScript

$(document).ready(function() {

  // map over all children in the main json branch
  var dropdownData = json.tree.children.map(function(branch, i) {
    return {
      id: i,
      text: branch.name,
    }
  });

  // Add all branches  to  select2.
  $('.js-example-basic-single').select2({
    data: dropdownData
  });

  // Add change event listener. When an option is selected, clear the SVG and run treeBoxes function again.
  $('.js-example-basic-single').change(function(e) {
    $("#tree-container").empty();
    var selectedBranch = e.target.value;
    treeBoxes(null, json.tree.children[selectedBranch]);
  });
});

这是一个直播的working example on JSFiddle，它仍需要一些调整，但它会帮助你朝着正确的方向前进。

注意：为了使这个示例有效，我在 html 文档中添加了 json，而不是从文件中加载数据。