D3 Examples - PackTree(logical Tree)

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

xxxxxxxxxx
 
<!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>
​
<body>
  
<div class="app" id="app" v-cloak>
  <div class="sence">
    <div ref="board" class="board">
      <div ref="adopted" class="board__face board__face-front"></div>
      <div ref="rejected" class="board__face board__face-back"></div>
    </div>
  </div>
​
​
  <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>
​
​
<div id="form"></div><!--弹出框-->
  
  
  
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
  
<script src="chart.js"></script><!--图形-->
<script src="form.js"></script><!--弹出框-->
<script>
​
var width = 1000, height = 500;
var adopted  = new PackTree().width(width).height(height).focusMe(),
   rejected = new PackTree().width(width).height(height);
​
var app = new Vue({
  el: "#app",
  data: {
    adopted: 0,
    rejected: 0,
    current: "adopted"
  },
  methods: {
    swap: function ($event) {
      if (this.current === $event) { return; }
      this.current = $event;
      if ($event == "adopted") { adopted.focusMe(); }
      if ($event == "rejected") { rejected.focusMe(); }
      this.$refs.board.classList.toggle("rotate");
    }
  },
  mounted: function () {
    var self = this;
    adopted.onCount  = function (count) { self.adopted  = count; };
    rejected.onCount = function (count) { self.rejected = count; };
  }
});
​
​
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>
​
    