Question

D3已经有一堆symbols，但我想添加一个自定义的。{因此，我可以在我的代码中调用d3.svg.symbol().type('custom')。

Answer 1

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

您可以在源代码HERE中看到符号定义存储在名为d3.map的{{1}}中。此映射中唯一暴露给公共API的部分是键数组。这是通过调用地图的d3_svg_symbols方法HERE完成的。

.keys()

定义本身永远不会公开，因此您无法直接添加定义。

但是，您可以毫不费力地构建解决方法。一种方法是创建自定义符号的映射，并根据内置符号的现有符号创建函数。例如：

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;
};

HERE是此方法的演示。

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

创建其他D3.js符号

1 个答案: