mtdv logo

颜色板

阅读时间约 2 分钟

graph.colorPalette

Object

内置颜色色板

// ---------- 当前色板 ----------
current

//---------- d3色板 ----------
d3

// ---------- Material Design色板 ---------- https://material.io/resources/color/
_colorMaterialDesign14Map;
_colorMaterialDesign14IndexName;
colorMaterialDesign14Get;
_colorMaterialDesign10Map;
_colorMaterialDesign10IndexName;
colorMaterialDesign10Get;
_colorMaterialDesign1Map;

// ---------- Apple色板 ---------- https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
_colorAppleIndexName;
colorApplemacOSDefaultAqua;
colorApplemacOSDefaultDark;
colorApplemacOSVibrantAqua;
colorApplemacOSVibrantDark;
colorApplemacOSAccessibleAqua;
colorApplemacOSAccessibleDark;
colorApplemacOSAccessibleAndVibrantAqua;
colorApplemacOSAccessibleAndVibrantDark;
colorAppleiOSDefaultLight;
colorAppleiOSDefaultDark;
colorAppleiOSAccessibleLight;
colorAppleiOSAccessibleDark;
colorApplewatchOS;

// ---------- Fluent Colors色板 ---------- https://www.fluentcolors.com/
colorFluentUI;

// ---------- AntD色板 ---------- https://ant.design/docs/spec/colors-cn
_colorAntdMap;
_colorAntdIndexName;
colorAntdGet;

// ---------- AntV色板 ---------- https://antv.vision/zh/docs/specification/language/palette
colorAntVBase10;
colorAntVBase10IndexName;
colorAntVBase20;
colorAntVAutumn;
colorAntVMacaron;
colorAntVContrastingOrange;
_colorAntVSingleMap;
colorAntVSingleGet;
_colorAntVNearMap;
colorAntVNearGet;
_colorAntVDivergentMap;
colorAntVDivergentGet;
_colorAntVOverlayMap;
colorAntVOverlayGet;
colorAntVStrong9;
colorAntVStrong19;
colorAntVSemantic;
colorAntVSemanticIndexName;

// ---------- ECharts色板 ---------- https://echarts.apache.org/zh/theme-builder.html
colorEChartsVintage;
_colorEChartsVintageBackground;
colorEChartsDark;
_colorEChartsDarkBackground;
colorEChartsWesteros;
_colorEChartsWesterosBackground;
colorEChartsEssos;
_colorEChartsEssosBackground;
colorEChartsWonderland;
_colorEChartsWonderlandBackground;
colorEChartsWalden;
_colorEChartsWaldenBackground;
colorEChartsChalk;
_colorEChartsChalkBackground;
colorEChartsInfographic;
_colorEChartsInfographicBackground;
colorEChartsMacarons;
_colorEChartsMacaronsBackground;
colorEChartsRoma;
_colorEChartsRomaBackground;
colorEChartsShine;
_colorEChartsShineBackground;
colorEChartsPurplePassion;
_colorEChartsPurplePassionBackground;

用户可以选择喜欢的色板主题,或者可以自定义色板

graph.color()

Function

根据当前色板 graph.colorPalette.current,生成颜色函数,更换当前色板后,需要手动调用该方法生成新的颜色函数

返回值

  • color : function

graph.colorStatic(seed)

Function

对当前色板生成颜色函数,更换当前色板,重新生成颜色函数需要替换当前旧的颜色函数

参数

  • seed : any required 生成颜色的种子,通常情况下是节点、边的 id,类型,随机数等

返回值

  • color : string 颜色色值

graph.nodeColor(d)

Function

获取节点颜色的函数,用户可以通过重写该函数自定义节点颜色

参数

  • d : object required 节点对象

graph.linkColor(d)

Function

获取边颜色的函数,用户可以通过重写该函数自定义边颜色

参数

  • d : object required 边对象