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在這里與您的子對象相對應並具有屬性； 名稱，百分比和持續時間

.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]);
  });
});

這是JSFiddle上的一個實時工作示例 ，仍然需要進行一些調整，但是它將幫助您朝着正確的方向發展。

注意：為了使此示例正常工作，我在html文檔中添加了json，而不是從文件中加載數據。