D3 —— 绘图基础 #12

Heqingsong · 2019-08-16T14:03:53Z

颜色

RGB 红、绿、蓝
HSL 色相、饱和度、亮度

RGB、HSL

    var color1 = d3.rgb(40, 80, 0);
    var color2 = d3.rgb('hsl(40, 80, 0)');
    var color3 = d3.rgb('rgb(40, 80, 0)');
    var color4 = d3.rgb('#FF0000');
    var color5 = d3.rgb('#fcc');
    var color6 = d3.rgb('red');

    // 颜色变的更亮，返回新的颜色对象
    color1.brighter(2);

    // 颜色变的更暗，返回新的颜色对象
    color2.darker(2);

    // 返回该颜色值对应的HSL值
    console.log(color4.hsl()); // {h: 0, s: 1, l: 0.5}

    // 以字符串形式返回颜色值
    console.log(color6.toString()); // #ff0000

    // HSL
    var color7 = d3.hsl(120, 8, 0.5);

    color7.brighter(2);
    color7.darker(2);
    console.log(color7.rgb()); // {r: 0, g: 255, b: 0}
    console.log(color7.toString()); // #00ff00

插值

    var color1 = d3.rgb(0, 255, 0); // 绿色
    var color2 = d3.rgb('#FF0000'); // 红色

    var compute = d3.interpolate(color1, color2); // 插值处理

    // <= 0 的时候返回第一个颜色值
    console.log(compute(0)); // #00ff00

    // >= 1 的时候返回最后一个颜色值
    console.log(compute(1)); // #ff0000

    // 0 - 1 区间中取值
    console.log(compute(0.3)); // #4db300

线段生成器

方式一

    <body>
        <svg>
            <line x1="20" y1="20" x2="300" y2="100" />
            <path d="M20,20L400,200" />
        </svg>
    </body>

方式二

    svg.append('line')
        .attr({
            'x1': 20,
            'y1': 20,
            'x2': 300,
            'y2': 300
        });
    
    svg.append('path')
        .attr('d', 'M20,20L400,200');

方式三

    var svg = d3.select('body')
          .append('svg')
          .attr({
            'width': 300,
            'height': 300
          })
          .style({
            'background-color': '#404a58'
          });

    var lines = [[20,20],[200,100],[200,200],[100,200]];

    // 创建一个线段
    var linePath = d3.svg.line()

        // 设置线段 x 坐标
        .x(function(d){
            return d[0]
        })

        // 设置线段 y 坐标
        .y(function(d, i){
            return i % 2 === 0 ? 40 : 120;
        })
        /*
            linear -分段线性片段，如折线。
            linear-closed –闭合直线段，以形成一个多边形。
            step - 水平和垂直段之间交替，如在step函数中。
            step-before -垂直和水平段之间交替，如在step函数中。
            step-after -水平和垂直段之间交替，如在step函数中。
            basis - B样条曲线(B-spline)，在两端的控制点的重复。
            basis-open – 开放B样条曲线，首尾不会相交。
            basis-closed -封闭B样条曲线，如在一个循环。
            bundle – 等价于basis, 除了使用tension参数拉直样条曲线。
            cardinal – 基本样条曲线(Cardinal spline)，在末端控制点的重复。
            cardinal-open –开放的基本样条曲线，首尾不会相交，但和其他控制点相交。
            cardinal-closed -封闭基本样条曲线，如在一个循环。
            monotone - 三次插值(cubic interpolation)，可以保留y的单调性。
        */

        // 设置线段的插值模式
        .interpolate('cardinal')

        // 设置张力系数 取值范围0-1 | 0 最大 1 最小
        .tension(0)

        // 获取一个访问器，判断为存在的数据才会显示
        .defined(function(d){ 
            return d[0] < 201;
        });

    svg.append('path')
        .attr({
            'd': linePath(lines), // 使用线段生成器
            'stroke': 'black',
            'stroke-width': '3px',
            'fill': 'none'
        });

区域生成器

    var height = 300;
    var width = 500;
    var svg = d3.select('body')
          .append('svg')
          .attr({
            'width': width,
            'height': height
          })
          .style({
            'background-color': '#404a58'
          });

    var dataset = [80, 120, 130, 70, 60, 90];

    // 创建一个区域
    var areaPath = d3.svg.area()
        .x(function(d, i){
            return 50 + i * 80;
        })
        .y0(function(d, i){
            return height / 2;
        })
        .y1(function(d, i){
            return height / 2 - d;
        })
        .interpolate('cardinal')
        .tension(0);

    svg.append('path')
        .attr({
            'd': areaPath(dataset),
            'stroke': 'black',
            'stroke-width': '3px',
            'fill': 'yellow'
        });

弧生成器

    var height = 500;
    var width = 500;
    var svg = d3.select('body')
          .append('svg')
          .attr({
            'width': width,
            'height': height
          })
          .style({
            'background-color': '#2c343c'
          });

    var dataset = [
      // 起始角度      终止角度
      {startAngle: 0, endAngle: Math.PI * 0.6},
      {startAngle: Math.PI * 0.6, endAngle: Math.PI},
      {startAngle: Math.PI, endAngle: Math.PI * 1.7},
      {startAngle: Math.PI * 1.7, endAngle: Math.PI * 2},
    ];

    // 创建一个弧生成器
    var arcPath = d3.svg.arc()
        // 内半径
        .innerRadius(40)
    
        // 外半径
        .outerRadius(100);

    // 生成 10 个颜色
    var colors = d3.scale.category10();

    // 弧
    svg.selectAll('path')
        .data(dataset)
        .enter()
        .append('path')
        .attr({
            'd': function(d) {
              return arcPath(d);
            },
            'transform': 'translate(250, 250)',
            'stroke-width': '1px',
            'fill': function(d, i){
              return colors(i);
            }
        });

    // 文字
    svg.selectAll('text')
        .data(dataset)
        .enter()
        .append('text')
        .attr({
            'd': function(d) {
              return arcPath(d);
            },
            'transform': function(d){
              return 'translate(250, 250)' + 'translate('+arcPath.centroid(d)+')';
            },
            'text-anchor': 'middle',
            'fill': function(d, i){
              return colors(i);
            },
            'font-size': '18px'
        })
        .text(function(d){
          return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + '°';
        });

符号生成器

    var height = 500;
    var width = 500;
    var svg = d3.select('body')
          .append('svg')
          .attr({
            'width': width,
            'height': height
          })
          .style({
            'background-color': '#2c343c'
          });

    var dataset = [];

    // 创建一个弧生成器
    var symbol = d3.svg.symbol()
        // 内半径 w 10, h 10
        .size(500)
    
        // 设置生成符号的类型
        // 圆形，      加号，    菱形，      正方形，   向下三角，         向上三角
        // ["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]
        .type('triangle-up');

    svg.append('path')
       .attr({
          'd': symbol,
          'transform': 'translate(250, 250)'
       });

    // 支持的符号类型
    console.log(d3.svg.symbolTypes); 
    // ["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]

弦生成器

    var height = 500;
    var width = 500;
    var svg = d3.select('body')
          .append('svg')
          .attr({
            'width': width,
            'height': height
          })
          .style({
            'background-color': '#2c343c'
          });

    // 创建一个弦生成器
    var chord = d3.svg.chord()
    
              // 半径
              .radius(100)
              
              // 起始弧
              .source(0.2)
    
              // 终止弧
              .target(Math.PI)
    
              // 起始角度
              .startAngle(Math.PI * 0.7)
    
              // 终止角度
              .endAngle(Math.PI * 2);

    svg.append('path')
       .attr({
          'd': chord(),
          'transform': 'translate(250, 250)',
          'fill': '#FFF',
       });

对角线生成器

   var height = 500;
   var width = 500;
   var svg = d3.select('body')
          .append('svg')
          .attr({
            'width': width,
            'height': height
          })
          .style({
            'background-color': '#2c343c'
          });

    var dataset = {
      source: {
        x: 10,
        y: 100
      },
      target: {
        x: 300,
        y: 200
      }
    }

    // 创建一个弦生成器
    var diagonal = d3.svg.diagonal()
                     .projection(function(d){
                        var x = d.x * 1.5;
                        var y = d.y * 1.5;
                        return [x, y];
                     });

    svg.append('path')
       .attr({
          'd': diagonal(dataset),
          'fill': 'none',
          'stroke': '#FFF',
          'stroke-width': '3px'
       });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

D3 —— 绘图基础 #12

D3 —— 绘图基础 #12

Heqingsong commented Aug 16, 2019

D3 —— 绘图基础 #12

D3 —— 绘图基础 #12

Comments

Heqingsong commented Aug 16, 2019

颜色

RGB、HSL

插值

线段生成器

方式一

方式二

方式三

区域生成器

弧生成器

符号生成器

弦生成器

对角线生成器