本文整理匯總了TypeScript中@hpcc-js/common.Palette.ordinal方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Palette.ordinal方法的具體用法？TypeScript Palette.ordinal怎麽用？TypeScript Palette.ordinal使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@hpcc-js/common.Palette的用法示例。
在下文中一共展示了Palette.ordinal方法的2個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: describe
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("graph", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case Edge:
const graph = new Graph();
const vertices: any[] = [];
const edges: any[] = [];
const palette = Palette.ordinal("dark2");
const rawData = data.simple;
rawData.nodes.forEach(function (node) {
vertices.push(
new Vertex()
.text(node.name)
.textbox_shape_colorStroke(palette(node.icon))
.textbox_shape_colorFill("whitesmoke")
.icon_diameter(60)
.icon_shape_colorStroke("transparent")
.icon_shape_colorFill("transparent")
.icon_image_colorFill("#333333")
.textbox_shape_colorStroke("transparent")
.textbox_shape_colorFill("transparent")
.textbox_text_colorFill("#333333")
.iconAnchor("middle")
.faChar(node.icon)
)
;
}, graph);
rawData.links.forEach(function (link, idx) {
edges.push(
new Edge()
.sourceVertex(vertices[link.source])
.targetVertex(vertices[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("Hello!")
.strokeDasharray(idx === 0 ? "15, 10, 5, 10, 15" : "")
.strokeColor(idx === 0 ? "cyan" : "")
.weight(50)
)
;
}, graph);
graph.data({ vertices, edges });
render(graph);
break;
case AdjacencyGraph:
render(new AdjacencyGraph()
.columns(["uid", "label", "links"])
.data([
[1, "AdjacencyGraph 1", [[2], [3], [4]]],
[2, "AdjacencyGraph 2", []],
[3, "AdjacencyGraph 3", []],
[4, "AdjacencyGraph 4", []]
] as any)
);
break;
case Graph:
const graph2 = new Graph();
const vertices2: any[] = [];
const edges2: any[] = [];
const palette2 = Palette.ordinal("dark2");
const rawData2 = data.simple;
rawData2.nodes.forEach(function (node) {
vertices2.push(
new Vertex()
.text(node.name)
.textbox_shape_colorStroke(palette2(node.icon))
.textbox_shape_colorFill("whitesmoke")
.icon_diameter(30)
.icon_shape_colorStroke(palette2(node.icon))
.icon_shape_colorFill(palette2(node.icon))
.faChar(node.icon)
);
}, graph2);
rawData2.links.forEach(function (link, idx) {
edges2.push(
new Edge()
.sourceVertex(vertices2[link.source])
.targetVertex(vertices2[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("")
.weight(50)
);
}, graph2);
graph2.data({ vertices: vertices2, edges: edges2 });
render(graph2);
break;
case Sankey:
render(new Sankey()
.columns(dataBreach.columns)
.data(dataBreach.data)
//.........這裏部分代碼省略.........
示例2: INDChart
import { Palette } from "@hpcc-js/common";
import { hsl as d3Hsl } from "d3-color";
export function INDChart() {
}
INDChart.prototype._dataFamily = "ND";
INDChart.prototype._palette = Palette.ordinal("default");
INDChart.prototype.fillColor = function (row: any[], column: string, value: number): string {
return this._palette(column);
};
INDChart.prototype.strokeColor = function (row: any[], column: string, value: number): string {
return d3Hsl(this.fillColor(row, column, value)).darker().toString();
};
INDChart.prototype.textColor = function (row: any[], column: string, value: number): string {
return Palette.textColor(this.fillColor(row, column, value));
};
// Events ---
INDChart.prototype.click = function (row, column, selected) {
console.log("Click: " + JSON.stringify(row) + ", " + column + ", " + selected);
};
INDChart.prototype.dblclick = function (row, column, selected) {
console.log("Double click: " + JSON.stringify(row) + ", " + column + ", " + selected);
};