ng-alain+d3.js开发类表格

1、安装使用

    1）安装d3 

    npm install --save d3

    2）安装@types/d3

    npm install --save @types/d3

    3）安装d3-dsv

  npm install --save @types/d3-dsv

2、tip插件无法使用

    d3-tip和tooltip均无法使用

    解决办法：1）自己写个tip

    初始化画布是调用，将tip注入进去。

initTip(d) {
  function D3Tooltip(d3Obj) {
    this.d3 = d3Obj;
    this.$el = d3Obj.select('#d3_analysisTrace_tip');
  }

  D3Tooltip.prototype.html = function(html) {
    this.$el.html(html);
  };

  D3Tooltip.prototype.show = function() {
    this.$el
      .transition()
      .duration(200)
      .style('opacity', 0.8);
    this.$el
      .style('left', this.d3.event.pageX + 'px')
      .style('top', this.d3.event.pageY - 28 + 'px');
  };

  D3Tooltip.prototype.hide = function() {
    this.$el
      .transition()
      .duration(500)
      .style('opacity', 0);
  };
  return new D3Tooltip(d);
}

3、开发注意事项

1）标签不能使用样式控制字符串长度，需要自己处理。且无法再填充其他标签，

    解决思路：通过canvasmeasureText方法来计算字符串长度，人为截取

/**
 *@函数名称getTextWidth
 *@参数：text 字符串长度
 *@作用：获取字符串宽度像素
 *@date 2018/5/23
 */
getTextWidth(text: string) {
  return this.ctx.measureText(text).width;
}
/**
 * 字符串截取 过长...显示
 * @param text
 * @returns {any}
 */
ellipsizeText(text) {
  const maxW = this.getTextDomWidth();
  const textW = this.getTextWidth(text);
  if (textW > maxW) {
    let str = '';
    const addStr = '...';
    for (const t of text) {
      const singItem = str + t + addStr;
      if (this.getTextWidth(singItem) > maxW) {
        return singItem;
      }
      str = str + t;
    }
  } else {
    return text;
  }
}

/**
 * 获取当前dom允许最大的数据展示宽度
 * @returns {any}
 */
getTextDomWidth() {
  if (this.get('textDomWidth')) {
    return this.get('textDomWidth');
  }
  const width = document.getElementById('svg_analysisTrace_table')
    .offsetWidth;
  const textDomWidth = width / 6 - width * 0.03;
  this.set('textDomWidth', textDomWidth);
  return textDomWidth;
}

4、界面效果

5、源码