PackTree(logical Tree)

Author: cxhair@163.com

Amended based on my previous work: Dynamic Pack.

Node category:

dataNode: created by use when filling dialog
andNode: logical node created by dataNode merged
orNode: logical node created by dataNode merged

How does node merging work

If two dataNodes come close merge them into a new andNode
If two andNodes come close,one of them will grow into a bigger andNode and the another will be removed
If two orNodes come close merge them into a new bigger orNode
If one node is dataNode and another is logic node(wrapper node), dataNode will be merged into that logic node
If both are logic node but NOT the same type, andNode will be merged into orNode

Chart Events

Right click on blank canvas will pop the dialog that used for creating dataNode
Right click on nodes: dismissed from parent logical node or removed after user confirmed.
Ctrl + Click: hold on the Ctrl then click on dataNode under the root teee will merge those dataNode into a bigger orNode
Drag dataNode close to another dataNode will merged into a andNode
Double click on dataNode will pop dialog and update it after user confirmed.

Dialog Events

Esc: close dialog
Query items can be shifted by dragging on handlers
Data validation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="style.css">
</head>

<div class="controls controls__topLeft">
    <div class="btn-group btn-group-toggle">
      <button type="button"
      class="btn"
      :class="{active: current == 'adopted', 'btn-primary': current == 'adopted', 'btn-secondary': current != 'adopted'}"
      @click="swap('adopted')">
        纳入标准 <span class="badge badge-light">{{adopted}}</span>
      </button>

<button type="button"
      class="btn"
      :class="{active: current == 'rejected', 'btn-primary': current == 'rejected', 'btn-secondary': current != 'rejected'}"
      @click="swap('rejected')">
        排除标准 <span class="badge badge-light">{{rejected}}</span>
      </button>
    </div>
  </div>
</div>

var width = 1000, height = 500;
var adopted  = new PackTree().width(width).height(height).focusMe(),
   rejected = new PackTree().width(width).height(height);

vm.db
  .initialGetUrl("./collections.json")  // 1）这是第一条GET请求
  .subsequentGetUrlFn(function (name) {  // 2）这是后续GET请求url配置函数
    return "./" + name + ".json";
  })
  .failedFn(function (error) {
    console.log(error);
  })
  .successFn(function (data) {
    vm.$set(vm.$data, "collections", data.collections);
    vm.currentCollection = data.doc.name;

vm.$mount("#form");

adopted.vForm(vm).initialize(app.$refs.adopted, true);
    rejected.vForm(vm).initialize(app.$refs.rejected);
  })
  .run();
  
  
d3.select(window.parent.document.querySelector("iframe"))
  .style("width", "1000px")
  .style("height", "500px");
	
</script>
</body>

https://cdn.jsdelivr.net/npm/babel-polyfill@6.26.0/dist/polyfill.js

https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js

https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js

https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js