如何寫可複用的d3組件

時間 2020-01-02

標籤如何用的 d3 組件简体版

原文原文鏈接

基礎準備

js組件種類和分層

前端開發是一個B/S結構的開發，web前端工程師可以接觸到的最底層的API就是由瀏覽器提供的API，瀏覽器API主要分爲HTML、CSS、JS三種，而咱們的d3.js主要使用的是svg和canvascss

咱們知道瀏覽器底層存在不少問題：(es6以前)html

js核心語法層面是比較薄弱的，像面向對象的extend
js原生API很差用，好比cookie ajax
瀏覽器兼容性問題

框架組件又能夠分爲：前端

框架通用組件
框架定製組件

閉包函數寫法

在閉包函數上掛載配置項git

function chart() {

   //這裏寫cfg配置項
  var width = 720, // default width
      height = 80; // default height

  function my() {
    // generate chart here, using `width` and `height`
  }
  //函數自己也是對象 能夠掛載變量和屬性
  //因此咱們把繪製圖表函數（閉包函數my（））內的繪製用的變量width height等 掛載在它自己（my（）這個對象） 上 
// 這樣若是咱們能夠自由的改變這些配置項
  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  return my;
}

總結：這就是所謂的面向對象的寫法，es6

把成員變量直接暴露在外不符合OOP的封裝性原則，不安全，應該使用getter和seter方法來取值和賦值。github

淺談 JS 對象添加 getter與 setter 的5種方法以及如何讓對象屬性不可配置或枚舉web

實際案例

htmlajax

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <p id="example"></p>
    <script src="https://cdn.bootcss.com/d3/2.10.0/d3.v2.js"></script>
    <script src="time-series-chart.js"></script>
    <script>
    

        var chart = timeSeriesChart()
                        .x(function(d) { return formatDate.parse(d.date); })
                        .y(function(d) { return +d.price; });

        var formatDate = d3.time.format("%b %Y");
        

        d3.csv("http://otc2ysde8.bkt.clouddn.com/charts/sp500.csv",function(data) {
            d3.select("#example")
                  .datum(data)
              .call(chart);
    });    
    </script>
</body>
</html>

time-series-chart.jscanvas

function timeSeriesChart() {
  var margin = {top: 20, right: 20, bottom: 20, left: 20},
      width = 760,
      height = 120,
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; },
      xScale = d3.time.scale(),
      yScale = d3.scale.linear(),
      xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0),
      area = d3.svg.area().x(X).y1(Y),
      line = d3.svg.line().x(X).y(Y);

  function chart(selection) {
    selection.each(function(data) {

      // Convert data to standard representation greedily;
      // this is needed for nondeterministic accessors.
      data = data.map(function(d, i) {
        return [xValue.call(data, d, i), yValue.call(data, d, i)];
      });

      // Update the x-scale.
      xScale
          .domain(d3.extent(data, function(d) { return d[0]; }))
          .range([0, width - margin.left - margin.right]);

      // Update the y-scale.
      yScale
          .domain([0, d3.max(data, function(d) { return d[1]; })])
          .range([height - margin.top - margin.bottom, 0]);

      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([data]);

      // Otherwise, create the skeletal chart.
      var gEnter = svg.enter().append("svg").append("g");
      gEnter.append("path").attr("class", "area");
      gEnter.append("path").attr("class", "line");
      gEnter.append("g").attr("class", "x axis");

      // Update the outer dimensions.
      svg .attr("width", width)
          .attr("height", height);

      // Update the inner dimensions.
      var g = svg.select("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // Update the area path.
      g.select(".area")
          .attr("d", area.y0(yScale.range()[0]));

      // Update the line path.
      g.select(".line")
          .attr("d", line);

      // Update the x-axis.
      g.select(".x.axis")
          .attr("transform", "translate(0," + yScale.range()[0] + ")")
          .call(xAxis);
    });
  }

  // The x-accessor for the path generator; xScale ∘ xValue.
  function X(d) {
    return xScale(d[0]);
  }

  // The x-accessor for the path generator; yScale ∘ yValue.
  function Y(d) {
    return yScale(d[1]);
  }

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return chart;
  };

  console.log(chart);

  return chart;

}