创建额外的 D3.js 符号

D3 已经具有很多功能symbols https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-symbol，但我想添加一个自定义的。这样我就可以打电话d3.svg.symbol().type('custom')在我的代码中。

这不能直接完成，因为无法从 API 访问符号定义数组。

在源码中可以看到HERE https://github.com/mbostock/d3/blob/a10b22654c9275da1050e1513bbd834646c0bde3/src/svg/symbol.js#L49-L100符号定义存储在d3.map called d3_svg_symbols。该映射中唯一暴露给公共 API 的部分是键数组。这是通过调用来完成的.keys()地图方法，HERE https://github.com/mbostock/d3/blob/a10b22654c9275da1050e1513bbd834646c0bde3/src/svg/symbol.js#L102.

d3.svg.symbolTypes = d3_svg_symbols.keys();

定义本身永远不会公开，因此您无法像您希望的那样直接添加定义。

不过，您可以毫无困难地构建一个解决方法。一种方法是创建自定义符号的映射，并基于内置符号的现有函数创建一个函数。例如：

// DEFINE A COUPLE OF CUSTOM SYMBOLS
var customSymbolTypes = d3.map({
  'custom-symbol-1': function(size) {
    // returns a path-data string
  },
  'custom-symbol-2': function(size) {
    // returns a path-data string
  }
});


// CREATE A CUSTOM SYMBOL FUNCTION MIRRORING THE BUILT-IN FUNCTIONALITY
d3.svg.customSymbol = function() {
  var type,
      size = 64; // SET DEFAULT SIZE
  function symbol(d,i) {
    // GET THE SYMBOL FROM THE CUSTOM MAP
    return customSymbolTypes.get(type.call(this,d,i))(size.call(this,d,i));
  }
  // DEFINE GETTER/SETTER FUNCTIONS FOR SIZE AND TYPE
  symbol.type = function(_) {
    if (!arguments.length) return type;
    type = d3.functor(_);
    return symbol;
  };
  symbol.size = function(_) {
    if (!arguments.length) return size;
    size = d3.functor(_);
    return symbol;
  };
  return symbol;
};

然后，您可以创建一个函数来检查某个符号是否在内置符号列表中，如果不在，则假设它是自定义符号：

function getSymbol(type, size) {
  // SIZE DEFAULTS TO 64 IF NOT GIVEN
  size = size || 64;
  // IF TYPE IS ONE OF THE BUILT-IN TYPES, CALL THE BUILT-IN FUNCTION
  if (d3.svg.symbolTypes.indexOf(type) !== -1) {
    return d3.svg.symbol().type(type).size(size)();
  } 
  // OTHERWISE, CALL THE CUSTOM SYMBOL FUNCTION
  else {
    return d3.svg.customSymbol().type(type).size(size)();
  }
}

HERE http://jsbin.com/xohox/1/edit?js,output是此方法的实际演示。

我承认，必须像这样重新实现整个符号函数似乎有点疯狂。可能值得在 github 页面上提出功能请求，要求能够提供可以读入内置方法的符号定义的自定义映射。无论如何，我希望现在能有所帮助。