外星人源码论坛 首页 编程经验 D3-Exploration Step2

D3-Exploration Step2

2018-3-5 06:48
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

创建一个BarChart 普通的做法: const rects = d3.select('svg').selectAll('rect').data().enter().append('rect'); const BAR_WIDTH = 10; const COLORS

创建一个BarChart

普通的做法:

const rects = d3.select('svg')
    .selectAll('rect')
    .data([100, 200, 300])
    .enter()
    .append('rect');
const BAR_WIDTH = 10;
const COLORS = ['red', 'yellow', 'green'];
rects.attr('x', (d, i) => {
    return i * BAR_WIDTH * (5/4);
}).attr('y', (d, i) => {

}).attr('width', BAR_WIDTH)
.attr('height', d => d)
.attr('fill', (d, i) => COLORS[i] );

CodePen

我们可以看到添加属性的时候都需要attr(name, value)这样的操作,所以我尝试将其封装了一下:

BaseChart

用法

    实现我们的具体Chart类,实现initChart方法

    class BarChart extends BaseChart {
    
      constructor(opts: IBaseChartOpts) {
        super(opts);
      }
    
      initChart() {
        this.d3Svg = this.d3Svg
          .selectAll("rect")
          .data(this.data)
          .enter()
          .append("rect");
      }
    }

    使用BarChart创建我们的Bar图表

      const bar = new BarChart({
        container: svgContainer, // 这里是上一篇创建的svgContainer
        data: [{Count: 100, Name: 'a' }, {Count: 200, Name: 'b' }],
      });
    
      bar
        .x((d, i: number) => {
          return (i + 1) * 40 + 10;
        })
        .y(0)
        .width(BAR_WIDTH)
        .height(d => d.Count)
        .fill((d, i) => COLORS[i]);
    
      bar
        .text(d => {
          return d.Name;
        })
        .x((d, i: number) => {
          return (i + 1) * 40 + 10;
        })
        .y(0);

    注: 这里的代码都是示范

BaseChart 源码

/**
 * @class d3-base-chart
 */
abstract class BaseChart extends AbstractChart {

  d3Svg: ID3Svg;
  data: any[];

  constructor(opts: IBaseChartOpts) {
    super();
    this.d3Svg = opts.container;
    this.data = opts.data || [];
    this.initChart();
  }

 abstract initChart(): void;

  x(fn: Function | Primitive) {
    this.d3Svg = this.d3Svg.attr("x", (d, i: number) => {
      return mormalizeToFn(fn)(d, i);
    });
    return this;
  }

  y(fn: Function | Primitive) {
    this.d3Svg = this.d3Svg.attr("y", (d, i: number) => {
      return mormalizeToFn(fn)(d, i);
    });
    return this;
  }

  width(fn: Function | Primitive) {
    this.d3Svg = this.d3Svg.attr("width", (d, i: number) => {
      return mormalizeToFn(fn)(d, i);
    });
    return this;
  }

  height(fn: Function | Primitive) {
    this.d3Svg = this.d3Svg.attr("height", (d, i: number) => {
      return mormalizeToFn(fn)(d, i);
    });
    return this;
  }

  fill(fn: Function | string) {
    this.d3Svg = this.d3Svg.attr("fill", (d, i: number) => {
      return mormalizeToFn(fn)(d, i);
    });
    return this;
  }

  text(fn: Function | string) {
    this.d3Svg = this.d3Svg
    .select("text")
    .data(this.data)
    .enter()
    .append("text")
    .text((d, i: number) => {
      return mormalizeToFn(fn)(d, i);
    });

    // 默认text位置
    this.x((d, i: number) => {
      return (i + 1) * 40 + 10;
    })
    .y(d => {
      return 5;
    })
    .fill(d => {
      return "#999";
    });;
    return this;
  }
}

/**
 * @class isFunction
 * @desc determined whether the fn is a Funciton,
 *        - if true return fn, 
 *        - else transform to a function return fn;
 */
function mormalizeToFn(fn: Function|Primitive): Function {
  if (typeof fn === "function") {
    return fn;
  } else {
    return () => {
      return fn; 
    };
  }
}

详细代码: Github


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读87 回复0
上一篇:
JS对象继承与原型链发布时间:2018-03-05
下一篇:
javascript 算法整理发布时间:2018-03-05
推荐资讯
阅读排行
国内最专业的源码技术交流社区
全国免费热线电话

0373-5171417

周一至周日9:00-23:00

反馈建议

admin@eenot.com 在线QQ咨询

扫描二维码关注我们