tbedp / datavjs

DataV

DataV.js

DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可视化在普通业务的落地应用。 我们的目标是：

凡有数据在处，皆能可视化

• API文档
• 任意疑问，请移至底下联系人部分即可。

安装

目前处于开发中，并未release正式版本，如需使用，请采用如下方式：

$ git clone git://github.com/TBEDP/datavjs.git

需要注意的是 example 目录下的例子中有 ajax 存在，所以你需要一个服务器来托管这些静态文件。

你也可以试用基于 DataV.js 开发的 Chrome插件，可以在任意网页中将表格可视化。

Examples

• Pie
• Treemap
• Tree
• Stream
• ScatterplotMatrix
• Force
• Matrix
• Bubble
• Chord
• Gender 性别图

Quick start

此处以Pie图为例。

引入依赖

<script src="path/to/build/datav.js"></script>
<script src="path/to/charts/pie.js"></script>

准备数据

var source = [
  ['北京', 50265],
  ['上海', 60555],
  ['广州', 38544],
  ['深圳', 27276],
  ['西安', 20506],
  ['昆明', 26916],
  ['武汉', 17636],
  ['拉萨', 977],
  ['哈尔滨', 10406],
  ['乌鲁木齐', 6695]
];

渲染图表

// 初始化组件
var pie = new Pie("container", {width: 1000, tag: true});
// 添加数据源
pie.setSource(source);
// 渲染
pie.render();

结果：

Requirements:

• D3.js.
• Raphael.js.
• Sea.js.

Learn more?

• The example site: http://datavlab.org/datavjs/
• API Docs

Contributors

Thanks goes to the people who have contributed code to this library, see the GitHub Contributors page.

Below is the output from git-summary

$ git summary 

 project  : datavjs
 repo age : 1 year
 active   : 159 days
 commits  : 431
 files    : 276
 authors  : 
   305  Jackson Tian            70.8%
    46  jdk137                  10.7%
    25  xie cong                5.8%
    18  gozo1234                4.2%
    11  Theseue                 2.6%
     8  xiecong                 1.9%
     8  wxtheseue               1.9%
     4  Jiang Dongke            0.9%
     3  郭方舟               0.7%
     2  unknown                 0.5%
     1  arcthur                 0.2%

License

DataV.js is available under the MIT License.

Contact

组件由淘宝数据产品部可视化小组以及浙大CAD&CG可视化与可视分析小组共同开发 开发联系人，有问题可咨询：

• 阿里旺旺
  • 朴灵
  • 宁朗
  • 法慧
  • 解聪(浙大实习生)
  • 黄芯芯(浙大实习生)
• 阿里旺旺群：76480715
• QQ群: 18164936
• Google Group: DataVLab
• Gtalk: [email protected]
• 浙大CAD&CG可视化与可视分析小组: VAG Wiki

如有疑问，或发现Bug，也可提交Bug

datavjs's Issues

地图会重复下载JSON数据

最好存放在一个静态的变量上。不要存在实例上。因为实例可能会重复创建

添加到 staticfile cdn

http://staticfile.org/about.html#howto

Cloud coder

A cload coder working at alibaba.

data v 中的进度池在打印的时候中间有一条黑线

data-v 链接http://datav.jiaminghi.com/guide/

柱状图柱宽自动计算

在图的宽度固定的情况下，可以根据数据的个数自动计算柱宽，如图。

Tree图在几次节点的收起和展开后，线条就丢了

折线图bug

• 坐标轴的粗细与折线的粗细分开
• hover的竖线位置有错误

package.json文件没有指定模块uglify-js的版本号

package.json 文件中没有指定模块uglify-js的版本号，这个模块的新版本2.x跟1.x的API不一样，运行 node bin/build.js 时如果加了压缩代码的选项会出错。

uglify-js 新版本压缩代码的例子：

var result = UglifyJS.minify("/path/to/file.js");
console.log(result.code); // minified output
// if you need to pass code instead of file name
var result = UglifyJS.minify("var b = function () {};", {fromString: true});

参考：https://github.com/mishoo/UglifyJS

你们：force的新的一点建议

您好：
关于force组件，能否提供点一个node，跟这个node有关的所有关系都显示出来，包括它二级、三级、四级。。。的关联关系？
期待您的回复

force：节点数据应该按数据的id索引，而不是数组index

源码地址：https://github.com/TBEDP/datavjs/blob/master/lib/charts/force.js

  Force.prototype.setSource = function (table, map) {
    map = this.map(map);
    //this.net = json;
    if (table[0][0] === "node") {
      table = table.slice(1);
    }
    var nData = [];
    var lData = [];
    var isNode = true;
    var nodeNum;
    var that = this;
    table.forEach(function (d, i) {
      var value;
      if (isNode) {
        if (d[map.nodeId] === "link") {
          isNode = false;
          nodeNum = i + 1;
        } else {
          if (d[map.nodeId] === "") {
            throw new Error("ID can not be empty(line:" + (i + 1) + ").");
          }
          value = that._toNum(d[map.nodeValue]);
          nData[i] = {
            name: d[map.nodeName],
            nodeValue: value
          };
          if (i === 0) {
            that.nodeValueMin = value;
            that.nodeValueMax = value;
          }
          that.nodeValueMin = (value < that.nodeValueMin) ? value : that.nodeValueMin;
          that.nodeValueMax = (value > that.nodeValueMax) ? value : that.nodeValueMax;
        }
      } else {
        if (d[map.linkSource - 3] === "") {
          throw new Error("Source can not be empty(line:" + (i + 1) + ").");
        }
        if (d[map.linkTarget - 3] === "") {
          throw new Error("Target can not be empty(line:" + (i + 1) + ").");
        }
        value = that._toNum(d[map.linkValue - 3]);
        lData[i - nodeNum] = {
          source: that._toNum(d[map.linkSource - 3]),
          target: that._toNum(d[map.linkTarget - 3]),
          value: that._toNum(d[map.linkValue - 3])
        };
        if (i === nodeNum) {
          that.linkValueMin = value;
          that.linkValueMax = value;
        }
        that.linkValueMin = (value < that.linkValueMin) ? value : that.linkValueMin;
        that.linkValueMax = (value > that.linkValueMax) ? value : that.linkValueMax;
      }
    });
    this.net.nodes = nData;
    this.net.links = lData;
    this.nodeValueMax++;
    this.linkValueMax++;
  };

这段代码中设置link的source和target的时候，应该根据数据的id来索引

   lData[i - nodeNum] = {
          source: that._toNum(d[map.linkSource - 3]),
          target: that._toNum(d[map.linkTarget - 3]),
          value: that._toNum(d[map.linkValue - 3])
    };

fixed后的代码如下：

 Force.prototype.setSource = function (table, map) {
    map = this.map(map);
    //this.net = json;
    if (table[0][0] === "node") {
      table = table.slice(1);
    }
    var nData = [],
        lData = [],
        isNode = true,
        nodeNum,
        that = this,
        NUM = 3,
        // FIXED: 用数据的id索引nodes
        index = {},
        source = map.linkSource - NUM,
        target = map.linkTarget - NUM,
        lValue = map.linkValue - NUM;

    table.forEach(function (d, i) {
      var value;
      if (isNode) {
        if (d[map.nodeId] === "link") {
          isNode = false;
          nodeNum = i + 1;
        } else {
          if (d[map.nodeId] === "") {
            throw new Error("ID can not be empty(line:" + (i + 1) + ").");
          }
          value = +(d[map.nodeValue]);
          nData[i] = {
            name: d[map.nodeName],
            nodeValue: value
          };
          if (i === 0) {
            that.nodeValueMin = value;
            that.nodeValueMax = value;
          }
          that.nodeValueMin = (value < that.nodeValueMin) ? value : that.nodeValueMin;
          that.nodeValueMax = (value > that.nodeValueMax) ? value : that.nodeValueMax;
        }
      } else {
        if (d[map.linkSource - 3] === "") {
          throw new Error("Source can not be empty(line:" + (i + 1) + ").");
        }
        if (d[map.linkTarget - 3] === "") {
          throw new Error("Target can not be empty(line:" + (i + 1) + ").");
        }

        value = +(d[map.linkValue - 3]);

    // FIXED: 用数据的id索引nodes
    index[d[map.id]] = i;
        lData[i - nodeNum] = {
          source: +(index[d[source]]),
          target: +(index[d[target]]),
          value: +(index[d[lValue]])
        };

        if (i === nodeNum) {
          that.linkValueMin = value;
          that.linkValueMax = value;
        }
        that.linkValueMin = (value < that.linkValueMin) ? value : that.linkValueMin;
        that.linkValueMax = (value > that.linkValueMax) ? value : that.linkValueMax;
      }
    });
    this.net.nodes = nData;
    this.net.links = lData;
    this.nodeValueMax++;
    this.linkValueMax++;
  };

柳岩离幸福好远

force 图距离计算有bug。

chord.js line 114 应该改为 i < this.groupNum

chord.js line 114：
for (i = 0; i <= this.groupNum; i++) {

应该改为
for (i = 0; i < this.groupNum; i++) {

否则图例里会有undefined出现，example里面没有出现是因为图例框超出了当前可见区域。

force：节点数据应该按id索引，而不是数组index

源码地址：https://github.com/TBEDP/datavjs/blob/master/lib/charts/force.js

  Force.prototype.setSource = function (table, map) {
    map = this.map(map);
    //this.net = json;
    if (table[0][0] === "node") {
      table = table.slice(1);
    }
    var nData = [];
    var lData = [];
    var isNode = true;
    var nodeNum;
    var that = this;
    table.forEach(function (d, i) {
      var value;
      if (isNode) {
        if (d[map.nodeId] === "link") {
          isNode = false;
          nodeNum = i + 1;
        } else {
          if (d[map.nodeId] === "") {
            throw new Error("ID can not be empty(line:" + (i + 1) + ").");
          }
          value = that._toNum(d[map.nodeValue]);
          nData[i] = {
            name: d[map.nodeName],
            nodeValue: value
          };
          if (i === 0) {
            that.nodeValueMin = value;
            that.nodeValueMax = value;
          }
          that.nodeValueMin = (value < that.nodeValueMin) ? value : that.nodeValueMin;
          that.nodeValueMax = (value > that.nodeValueMax) ? value : that.nodeValueMax;
        }
      } else {
        if (d[map.linkSource - 3] === "") {
          throw new Error("Source can not be empty(line:" + (i + 1) + ").");
        }
        if (d[map.linkTarget - 3] === "") {
          throw new Error("Target can not be empty(line:" + (i + 1) + ").");
        }
        value = that._toNum(d[map.linkValue - 3]);
        lData[i - nodeNum] = {
          source: that._toNum(d[map.linkSource - 3]),
          target: that._toNum(d[map.linkTarget - 3]),
          value: that._toNum(d[map.linkValue - 3])
        };
        if (i === nodeNum) {
          that.linkValueMin = value;
          that.linkValueMax = value;
        }
        that.linkValueMin = (value < that.linkValueMin) ? value : that.linkValueMin;
        that.linkValueMax = (value > that.linkValueMax) ? value : that.linkValueMax;
      }
    });
    this.net.nodes = nData;
    this.net.links = lData;
    this.nodeValueMax++;
    this.linkValueMax++;
  };

这段代码中设置link的source和target的时候，应该根据数据的id来索引

   lData[i - nodeNum] = {
          source: that._toNum(d[map.linkSource - 3]),
          target: that._toNum(d[map.linkTarget - 3]),
          value: that._toNum(d[map.linkValue - 3])
    };

fixed后的代码如下：

 Force.prototype.setSource = function (table, map) {
    map = this.map(map);
    //this.net = json;
    if (table[0][0] === "node") {
      table = table.slice(1);
    }
    var nData = [],
        lData = [],
        isNode = true,
        nodeNum,
        that = this,
        NUM = 3,
        // FIXED: 用数据的id索引nodes
        index = {},
        source = map.linkSource - NUM,
        target = map.linkTarget - NUM,
        lValue = map.linkValue - NUM;

    table.forEach(function (d, i) {
      var value;
      if (isNode) {
        if (d[map.nodeId] === "link") {
          isNode = false;
          nodeNum = i + 1;
        } else {
          if (d[map.nodeId] === "") {
            throw new Error("ID can not be empty(line:" + (i + 1) + ").");
          }
          value = +(d[map.nodeValue]);
          nData[i] = {
            name: d[map.nodeName],
            nodeValue: value
          };
          if (i === 0) {
            that.nodeValueMin = value;
            that.nodeValueMax = value;
          }
          that.nodeValueMin = (value < that.nodeValueMin) ? value : that.nodeValueMin;
          that.nodeValueMax = (value > that.nodeValueMax) ? value : that.nodeValueMax;
        }
      } else {
        if (d[map.linkSource - 3] === "") {
          throw new Error("Source can not be empty(line:" + (i + 1) + ").");
        }
        if (d[map.linkTarget - 3] === "") {
          throw new Error("Target can not be empty(line:" + (i + 1) + ").");
        }

        value = +(d[map.linkValue - 3]);

        // FIXED: 用数据的id索引nodes
        index[d[map.id]] = i;
        lData[i - nodeNum] = {
          source: +(index[d[source]]),
          target: +(index[d[target]]),
          value: +(index[d[lValue]])
        };

        if (i === nodeNum) {
          that.linkValueMin = value;
          that.linkValueMax = value;
        }
        that.linkValueMin = (value < that.linkValueMin) ? value : that.linkValueMin;
        that.linkValueMax = (value > that.linkValueMax) ? value : that.linkValueMax;
      }
    });
    this.net.nodes = nData;
    this.net.links = lData;
    this.nodeValueMax++;
    this.linkValueMax++;
  };

请问为什么数据要用数组形式？为什么不用json？

请问为什么数据要用数组形式？为什么不用json？
很费解为什么选用数组的数据格式，请问可以支持json吗

deps.js与jquery.form插件冲突

deps.js与jquery.form插件冲突，执行jquery.form中的ajaxform或ajaxsubmit时在deps中总是会报no method [ajaxform]或[ajaxsubmit]。

平行坐标轴API文档

帮你写了部分。需要补上剩余的

Bullet图的demo没有

• demo
• 数据定义
• 注释
• 文档
• 测试代码

@theseue 宁朗看看这个图是谁开发的。补一下以上这些点。

Pie chart没有像其他组件一样继承Chart

DataV.Force(): throw the exception "undefined is not a function "

Hi! This is the first time for me to construct a relation graph using Datavjs. I get a exception like "undefined is not a function " when I try to run my webpage with using {
var net = new DataV.Force("chart-relation",{"width": 700, "height": 500});
} to create my object. I have readed the "getting start.md" doc, but I just can't find the "compatible.js" in the master folder. Except that, I have included the all files needed. Now I get the exception related above. If you have any solution for this, please let me konw. Thanks advanced!

操作的时候cpu飙升。。。

force图示例中的乱码

https://github.com/TBEDP/datavjs/blob/butterfly/example/force/DataExample.csv
查看了下，是csv的乱码导致的。

麻烦@theseue 宁朗fix一下。上传一份utf-8的数据

Martix文档

• 数据定义
• 注释
• 文档
• 测试代码

@theseue 宁朗看看，补一下以上这些点。

可视化地图demo

您好，代码中没有找到可视化地图的代码文件。就是类似于map.ipviking的黑客攻击的可视化地图。

很久没更新消息了

很久没看到更新了，是否几位老大在酝酿大版本？还是。。。

Bubble 增加显示信息及多种数据格式支持

Bubble 需要显示更多的信息 以及 json xml数据源的支持

河北省的数据看起来有些异常

line 的图形是没有图例吗？

发现在像pie 和 bar 等经典图形中是有图例，而在line.js 中是没有的，pei 和 bar 都有 drawLegend 的方法，而在line.js 没有。是故意设计的吗？

Flow图问题

• demo
• 数据定义
• 注释
• 文档
• 测试代码

@theseue 宁朗看看这个图是谁开发的。补一下以上这些点。

Chord图的文字偏移问题

看看chord的文字偏移问题

**地图澳门没有显示

datavjs/example/chinamap/chinamap_gradient_without_seajs.html

澳门没有显示

需要线图

为什么不支持线图

dataV最新版本以后会开源吗？

RT，开放时间预计是多少呢?还是说会作为一个产品出售

chinamap信息需要更新

上海地图的原南汇合并到浦东新区，卢湾区合并到黄浦区，因此
datavjs/lib/charts/data/chinaMap/31.json文件需要更新