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)<text>标签不能使用样式控制字符串长度,需要自己处理。且无法再填充其他标签,
解决思路:通过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、源码