创建其他D3.js符号 [英] Create additional D3.js symbols

问题描述

D3已经具有许多符号，但是我想添加一个自定义的.这样我就可以例如在代码中调用d3.svg.symbol().type('custom').

D3 already features a bunch of symbols, but I'd like to add a custom one. So that I could for example just call d3.svg.symbol().type('custom') in my code.

推荐答案

由于无法从API访问符号定义数组，因此无法直接完成.

This cannot be done directly since the array of symbol definitions is not accessible from the API.

您可以在源代码中看到 HERE 表示符号定义存储在名为d3_svg_symbols的d3.map中.该映射中唯一公开给公共API的部分是密钥数组.这是通过调用地图的.keys()方法 HERE来完成的 .

You can see in the source code HERE that the symbol definitions are stored in a d3.map called d3_svg_symbols. The only part of this map that gets exposed to the public API is the array of keys. This is done by calling the .keys() method of the map, HERE.

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

这些定义本身从未公开过，因此您不能像希望的那样直接添加定义.

The definitions themselves are never exposed, and so you cannot add definitions directly as you had hoped.

但是，您可以构建一个解决方法而没有太多困难.一种方法是创建自定义符号的映射，然后基于现有符号为内置符号创建一个函数.例如:

You can, however, construct a workaround without too much difficulty. One way would be to create a map of your custom symbols, and create a function based on the existing one for the built-in symbols. For example:

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

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

Then, you could create a function to check if a symbol is in the list of built-in symbols, and if it's not, assume it is a custom 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 is a demo of this method in action.

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

I'll admit it seems kind of crazy to have to re-implement the whole symbol function like that. It might be worth a feature request on the github page asking to be able to provide a custom map of symbol definitions that could be read into the built-in method. Anyway, I hope that helps for now.

这篇关于创建其他D3.js符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！