Skip to content
项目技术栈趋势图
Branch: gh-pages
Clone or download
Latest commit f38ca57 Nov 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
test
.bowerrc init project Dec 22, 2015
.editorconfig
.gitattributes
.gitignore
.yo-rc.json
README.md 修改README格式 Nov 23, 2018
bower.json
gulpfile.babel.js init project Dec 22, 2015
index.html
package.json init project Dec 22, 2015
screenshot.jpg Add Screenshot Dec 23, 2015

README.md

项目技术栈趋势图

在线预览: http://phodal.github.io/techstack

最后的效果如下图:

Screenshot

文档 || 笔记

出于一些原因,我需要构建一个项目组相关的技术趋势图。首先也是想到了ThoughtWorks 技术雷达,然而我也发现了技术雷达只会发现一些新出现的技术,以及其对应的一些趋势。对于现有的技术栈的一些趋势不够明显,接着就只能去构建一个新的技术趋势图。

当然首选的框架也是D3.js,似乎会一些更好的工具,但是并不没有去尝试。

Schema与原始代码

最开始的代码是基于https://github.com/simonellistonball/techradar这个库的,但是这其中的数据都是写好的。而在找到这个库之前,我也定义好了我的数据应该有的样子:

{
  "name": "Java",
  "important": 5,
  "usage": 5,
  "current": 4,
  "future": 3,
  "description": "--------"
}

对就于每个技术栈都会有名字、重要程度、使用程度、当前级别、未来级别、描述的字段。毕竟技术是有其应该有的趋势的,如果仅仅只是在上面用一些图形来表示可能又不够。

接着,又按照不同的维度区分为language、others、tools、frameworks四个维度

{
  "language": [
    {
      "name": "Java",
      "important": 5,
      "usage": 5,
      "current": 4,
      "future": 3,
      "description": "--------"
    }
  ],
  "tools": [
    {
      "name": "Linux",
      "important": 3,
      "usage": 3,
      "current": 3,
      "future": 2,
      "description": "--------"
    }
  ],
  "others": [
    {
      "name": "Agile",
      "important": 3,
      "usage": 5,
      "current": 3,
      "future": 3,
      "description": "--------"
    }
  ],
  "frameworks": [
    {
      "name": "Node.js",
      "important": 3,
      "usage": 5,
      "current": 3,
      "future": 5,
      "description": "--------"
    }
  ]
}

而在上述的版本中,则有了我想要的箭头,尽管数据不合适,但是还是可以改的。

处理数据

然后,我们的主要精力就是集中在parse上面的数据中,取出每个数据,按照不同的维度去放置技术栈,并进行一些转换。

var results = [];
for (var quadrant in data) {
  $.each(data[quadrant], function (index, skill) {
    results.push({
      name: skill.name,
      important: skill.important,
      usage: skill.usage,
      description: skill.description,
      trend: entry(quadrant, convertFractions(skill.current), convertFractions(skill.future))
    });
  })
}
You can’t perform that action at this time.