Graph DFS and BFS 深度優先 廣度優先 Tree Traversal

 今天想要探討一下關於Graph裡面的DFS、BFS、Stack Treversal以及Binary Tree的Preorder、InOrder、PostOrder Traversal。

先看一下DFS的Iterative代碼

VueJS D3 2020 Tidy Tree Vue Component

 https://observablehq.com/@d3/tidy-tree

Dentro.vue

<!--

<template><div><dentro></dentro></div></template>

<script>

import Dentro from "@/views/Dentro.vue";

export default {components: {Dentro}};

</script>

-->

<template>

  <div>

    <h1>Dentro</h1>

    <div id="arc" class="svgborder" />

    <div id="den" class="svgborder" />

    <h1>End</h1>

  </div>

</template>

<script>

import * as d3 from "d3";

import flareJson from "@/assets/dentro.json";

export default {

  name: "Dentro",

  data() {

    return {

      gdp: [

        { country: "USA", value: 20.5 },

        { country: "China", value: 13.4 },

        { country: "Germany", value: 4.0 },

        { country: "Japan", value: 4.9 },

        { country: "France", value: 2.8 }

      ]

    };

  },

  mounted() {

    this.generateArc("#arc", this.gdp);

    this.generateDen("#den");

  },

  methods: {

    generateDen(id) {

      const width = 1280;

      const data = flareJson;

      const temp = d3.hierarchy(data);

      temp.dx = 10;

      temp.dy = width / (temp.height + 1);

      const root = d3.tree().nodeSize([temp.dx, temp.dy])(temp);

      let x0 = Infinity;

      let x1 = -x0;

      root.each(d => {

        if (d.x > x1) x1 = d.x;

        if (d.x < x0) x0 = d.x;

      });

      const svg = d3

        .select(id)

        .append("svg")

        .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);

      const g = svg

        .append("g")

        .attr("font-family", "sans-serif")

        .attr("font-size", 10)

        .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);

      const link = g

        .append("g")

        .attr("fill", "none")

        .attr("stroke", "#555")

        .attr("stroke-opacity", 0.4)

        .attr("stroke-width", 1.5)

        .selectAll("path")

        .data(root.links())

        .join("path")

        .attr(

          "d",

          d3

            .linkHorizontal()

            .x(d => d.y)

            .y(d => d.x)

        );

      console.log(link);

      const node = g

        .append("g")

        .attr("stroke-linejoin", "round")

        .attr("stroke-width", 3)

        .selectAll("g")

        .data(root.descendants())

        .join("g")

        .attr("transform", d => `translate(${d.y},${d.x})`);

      node

        .append("circle")

        .attr("fill", d => (d.children ? "#555" : "#999"))

        .attr("r", 2.5);

      node

        .append("text")

        .attr("dy", "0.31em")

        .attr("x", d => (d.children ? -6 : 6))

        .attr("text-anchor", d => (d.children ? "end" : "start"))

        .text(d => d.data.name)

        .clone(true)

        .lower()

        .attr("stroke", "white");

      const chart = svg.node();

      console.log(chart);

    },

    generateArc(id, gdp) {

      const w = 500;

      const h = 500;

      const svg = d3

        .select(id)

        .append("svg")

        .attr("width", w)

        .attr("height", h);

      const sortedGDP = gdp.sort((a, b) => (a.value > b.value ? 1 : -1));

      const color = d3.scaleOrdinal(d3.schemeDark2);

      const max_gdp = d3.max(sortedGDP, o => o.value);

      const angleScale = d3

        .scaleLinear()

        .domain([0, max_gdp])

        .range([0, 1.5 * Math.PI]);

      const arc = d3

        .arc()

        .innerRadius((d, i) => (i + 1) * 25)

        .outerRadius((d, i) => (i + 2) * 25)

        .startAngle(angleScale(0))

        .endAngle(d => angleScale(d.value));

      const g = svg.append("g");

      g.selectAll("path")

        .data(sortedGDP)

        .enter()

        .append("path")

        .attr("d", arc)

        .attr("fill", (d, i) => color(i))

        .attr("stroke", "#FFF")

        .attr("stroke-width", "1px")

        .on("mouseenter", function() {

          d3.select(this)

            .transition()

            .duration(200)

            .attr("opacity", 0.5);

        })

        .on("mouseout", function() {

          d3.select(this)

            .transition()

            .duration(200)

            .attr("opacity", 1);

        });

      g.selectAll("text")

        .data(gdp)

        .enter()

        .append("text")

        .text(d => `${d.country} -  ${d.value} Trillion`)

        .attr("x", -150)

        .attr("dy", -8)

        .attr("y", (d, i) => -(i + 1) * 25);

      g.attr("transform", "translate(200,300)");

    }

  }

};

</script>

<style scope>

.svgborder svg {

  border: 2px solid;

}

</style>

Middle

End

Sublime Package Controll Install Package Vue Syntax Highlight and Typescript

Vue Syntax Highlight

 https://learnku.com/vuejs/t/23281/configuring-vuejs-syntax-support-for-sublime-text-vue-syntax-highlighting

最近我需要 Sublime Text 编辑器下的 Vue 脚本显示语法高亮。 当你正在使用的代码编辑器没有语法高亮时，你就会发现这是一件多么痛苦的事。 所以，做了一些深入挖掘研究。

然而，我需要从一个站点到另一个站点来解决我的疑问。 因此，我列出了我参考的步骤。 希望这可以帮助到你！

安装 Package Control 扩展包

转到 http://wbond.net/sublime_packages/package_... 链接并复制那段很长的命令。

按住 Ctrl+` 打开 Sublime Text 控制台。

将你复制的命令粘贴到 Sublime Text 控制台中，然后按 Enter 键。

Package Control 扩展包安装好后，重新启动 Sublime Text 编辑器。

安装 Vue Syntax Highlighting 扩展包

再次按下 Command-Shift-P (Mac OS X) 或 Ctrl-Shift-P (Windows)，然后开始输入 “Package Control”

选择 Package Control: Install Package ，它就会列出所有可用的软件包。

搜索 Vue Syntax Highlight 并选择它然后安装。

就是这样！ 你再次打开 .vue 文件就可以看到语法高亮了。

————————————————

原文作者：Summer

转自链接：https://learnku.com/vuejs/t/23281/configuring-vuejs-syntax-support-for-sublime-text-vue-syntax-highlighting

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请保留以上作者信息和原文链接。

Typescript

再次按下 Command-Shift-P (Mac OS X) 或 Ctrl-Shift-P (Windows)，然后开始输入 “Package Control: Install Package”

搜索 Typescript 并选择它然后安装

测试在2020年9月可以打开ts档案之后可以显示语法

MacBook Air OSX Catalina Setup Homebrew Git

 

Window Mac 快捷鍵

Option Command Esc > Ctrl Alt Del

Option Command Space > Ctrl E

Chrome Command Shift F > F11

Command C, Option Command V > Ctrl X Ctrl V

Command Up Down Left Right [ ] for folder navigation

Chrome  Command L > Ctrl D

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install OpenSSL

sudo chown -R $(whoami) /usr/local/lib/pkgconfig

chmod u+w /usr/local/lib/pkgconfig

brew install openssl

快速放大視窗 Maximize Window Shortcut

url

Preference > Keyboard > App Shortcut > Zoom by Command+Option+=

Some uses Control+Command+= but that's a 2 hand operation

Finder開啟Terminal

以前使用Go2Shell在Catalina無法使用，改用FinderGo url

https://github.com/onmyway133/FinderGo

curl -fsSL https://raw.githubusercontent.com/onmyway133/FinderGo/master/install.sh | sh

Check for System Preferences -> Extensions -> Finder to enable FinderGo if it is not enabled yet

Git GUI

OSX上面沒法使用GitExtension，而且SourceTree在2020年8月時候無法在Catalina使用，於是改用Github Desktop，下載之後拉去Applications就可以。

End

Install Minoconda Python 3.8 on macOS Catalina 2020

 https://medium.com/@nonthakon/install-anaconda-python-3-7-on-mac-osx-catalina-aec9ba7537b7

Miniconda pkg installer, destination myself, files created on ~/opt/Minoconda

control-SPACE > Terminal > ps - p $$ > -zsh

Catalina uses zsh not bash nor csh

Terminal > conda is not recognised

Solution

Terminal

cd ~/opt/miniconda3/bin

conda init zsh

Now Terminal > python and Terminal > conda works