d3中，绘制一个图标，一般有两种方式：简单的手绘，繁琐的可以直接引入。

手绘

手绘自由度极高，可以直接用svg绘制，可以绑定css央视，还可以使用d3许多属性。这里不过多赘述。

引入

对于复杂的图形，直接引入是明智的选择。下面是几种常见的引用方法↓

  1. 使用html

    1
    2
    3
    4
    5
    this.svg.append("g").html(getInfoSvg())

    export const getInfoSvg = () => {
      return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><path d="M7.99954,0C3.58105,0,0,3.58197,0,8.00046C0,12.4189,3.58197,16,8.00046,16C12.4189,16,16,12.418,16,7.99954C16,3.58105,12.418,0,7.99954,0C7.99954,0,7.99954,0,7.99954,0ZM9.25222,10.9441C9.25231,10.944,9.25245,10.9441,9.25238,10.9442C8.65373,11.843,8.04415,12.5382,7.02457,12.5486C7.00916,12.5488,6.99332,12.5475,6.97815,12.5448C6.29,12.4225,6.00729,11.9214,6.15919,11.4124C6.15919,11.4124,7.48849,7.01034,7.48849,7.01034C7.5214,6.90155,7.46746,6.78727,7.36964,6.75253C7.27181,6.71779,7.07891,6.84487,6.91252,7.0268C6.91252,7.0268,6.41335,7.62831,6.41335,7.62831C6.2967,7.76886,6.10075,7.68304,6.10546,7.50045C6.10546,7.50045,6.10546,7.50045,6.10546,7.50045C6.10653,7.45889,6.11834,7.43706,6.14193,7.40283C6.74898,6.52194,7.71461,5.83372,8.37438,5.83372C9.01434,5.90046,9.31604,6.41061,9.20542,6.97194C9.20542,6.97194,7.86698,11.3959,7.86698,11.3959C7.84961,11.4965,7.90263,11.5971,7.99314,11.629C8.09188,11.6647,8.2985,11.5367,8.46489,11.3539C8.46489,11.3539,9.09395,10.5964,9.09395,10.5964C9.15996,10.5169,9.27489,10.5552,9.26924,10.6584C9.26291,10.7739,9.25207,10.8852,9.25204,10.9441C9.25204,10.9441,9.25215,10.9442,9.25222,10.9441C9.25222,10.9441,9.25222,10.9441,9.25222,10.9441C9.25222,10.9441,9.25222,10.9441,9.25222,10.9441ZM9.07468,5.19285C8.56637,5.19285,8.15496,4.8235,8.15496,4.2777C8.15496,3.7319,8.56728,3.36255,9.07468,3.36255C9.58208,3.36255,9.9944,3.73282,9.9944,4.2777C9.9944,4.82258,9.583,5.19285,9.07468,5.19285C9.07468,5.19285,9.07468,5.19285,9.07468,5.19285Z" fill="#90B8F3" fill-opacity="1"/></g></svg>`;
    };

  2. image图标

    1
    2
    3
    4
    5
    6
    7
    d3.select('svg')
      .append('image')
      .attr('xlink:href', 'icon.svg')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 32)
      .attr('height', 32);

  3. 字体图标 Font Awesome为例

    1
    2
    3
    4
    5
    6
    d3.select('svg')
      .append('text')
      .attr('x', 20)
      .attr('y', 30)
      .attr('class', 'fa')  // Font Awesome 类名
      .text('\uf007');      // Unicode 对应图标