From b2e5d093d98b6cece8b5438f63fd92213df1319c Mon Sep 17 00:00:00 2001 From: xieguigang Date: Tue, 16 Oct 2018 14:51:13 +0800 Subject: [PATCH] tweaks on default styles and force parameters --- d3.js/css/style.css | 2 +- d3.js/index.html | 5 ++- d3.js/javascript/KEGG_canvas.js | 56 ++++++++++++------------- typescript/KEGG_canvas/vis.ts | 68 +++++++++++++++---------------- typescript/build/KEGG_canvas.d.ts | 7 +++- 5 files changed, 70 insertions(+), 68 deletions(-) diff --git a/d3.js/css/style.css b/d3.js/css/style.css index 41d250c..4a55a50 100644 --- a/d3.js/css/style.css +++ b/d3.js/css/style.css @@ -9,7 +9,7 @@ } #chart{ - background-color:#DBF3FF; + background-color:white; width:1024px; height:800px; border: solid 4px #DBF3FF; diff --git a/d3.js/index.html b/d3.js/index.html index a82dd7c..9be386c 100644 --- a/d3.js/index.html +++ b/d3.js/index.html @@ -28,7 +28,10 @@ // 测试当前的浏览器是否支持HTML5的高级特性 if (SvgUtils.hasSVG2Feature()) { $.get("./graph.json", g => { - var viz = new KEGG_canvas(g); + var viz = new KEGG_canvas(g, { + charge: -200, + linkDistance: 30 + }); viz.attachSaveAsPng("#download-invoker"); }) } else { diff --git a/d3.js/javascript/KEGG_canvas.js b/d3.js/javascript/KEGG_canvas.js index 1074886..8a389a3 100644 --- a/d3.js/javascript/KEGG_canvas.js +++ b/d3.js/javascript/KEGG_canvas.js @@ -129,9 +129,13 @@ var Graph; * 彩色节点表示在当前的代谢物鉴定结果之中出现的KEGG化合物，彩色节点之间使用黑色的实现进行相连接 */ var KEGG_canvas = /** @class */ (function () { - function KEGG_canvas(graph) { + function KEGG_canvas(graph, opts) { + if (opts === void 0) { opts = { + charge: -200, + linkDistance: 50 // 影响聚类程度，值越小，聚类越明显 + }; } this.size = { - width: 1000, + width: 1024, height: 800 }; this.nodeMin = 5; @@ -159,7 +163,8 @@ var KEGG_canvas = /** @class */ (function () { * legend的外边框圆角矩形的radius */ this.legendBoxRadius = 6; - this.setupGraph(graph); + this.legendBoxWidth = 400; + this.setupGraph(graph, opts); this.tooltip = d3.select("#chart") .append("div") .attr("class", "large-3 columns") @@ -196,13 +201,11 @@ var KEGG_canvas = /** @class */ (function () { .style("opacity", .9); }; KEGG_canvas.prototype.moveTooltip = function () { - console.log("move"); this.tooltip .style("top", d3.event.pageY + 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }; KEGG_canvas.prototype.removeTooltip = function () { - console.log("remove"); this.tooltip .style("z-index", -1) // Make tooltip invisible @@ -211,26 +214,18 @@ var KEGG_canvas = /** @class */ (function () { .transition() .style("opacity", 0.8); }; - KEGG_canvas.prototype.displayPreview = function (e, preview) { - var pos = [e.pageX, e.pageY + 20]; - this.tooltip.html(preview.innerHTML) - .style("top", (pos[1]) + "px") - .style("left", (pos[0]) + "px") - .style("z-index", 10) - .style("opacity", .9); - }; KEGG_canvas.prototype.Clear = function () { $(".network").empty(); this.names = {}; this.nodecolor = {}; }; - KEGG_canvas.prototype.setupGraph = function (graph) { + KEGG_canvas.prototype.setupGraph = function (graph, opts) { var _this = this; var viz = this; this.Clear(); this.force = d3.layout.force() - .charge(-300) - .linkDistance(100) + .charge(opts.charge) + .linkDistance(opts.linkDistance) .size([this.size.width, this.size.height]); this.svg = d3.select("#chart") .append("svg:svg") @@ -266,12 +261,12 @@ var KEGG_canvas = /** @class */ (function () { }) .attr("id", "network") .style("stroke-width", function (d) { - var w = -Math.log(d.weight * 2); - if (w < 0.5) { - w = 0.5; + var w = -Math.log(d.weight * 2) / 2; + if (w < 0.3) { + w = 0.3; } - else if (w > 3) { - w = 3; + else if (w > 2) { + w = 2; } return w; }) @@ -297,7 +292,7 @@ var KEGG_canvas = /** @class */ (function () { .call(this.force.drag) .attr("r", function (d) { if (d.degree > 0) { - return viz.nodeMin + Math.pow(d.degree, 2 / (2.7)); + return viz.nodeMin + d.degree; // Math.pow(d.degree, 2 / (2.7)); } else { return viz.nodeMin; @@ -346,21 +341,22 @@ var KEGG_canvas = /** @class */ (function () { */ KEGG_canvas.prototype.showLegend = function () { var _this = this; - var rW = 300, rH = (this.dh + 5) * (Object.keys(this.type_colors).length - 1); - var top = 30, left = this.size.width - rW; + var rw = this.legendBoxWidth; + var rh = (this.dh + 5) * (Object.keys(this.type_colors).length - 1); + var top = 30, left = this.size.width - rw; var legend = this.svg.append("g") .attr("class", "legend") .attr("x", left) .attr("y", top) - .attr("height", rH) - .attr("width", rW); + .attr("height", rh) + .attr("width", rw); legend.append("rect") .attr("x", left) .attr("y", top) .attr("rx", this.legendBoxRadius) .attr("ry", this.legendBoxRadius) - .attr("height", rH) - .attr("width", rW) + .attr("height", rh) + .attr("width", rw) .style("stroke", "gray") .style("stroke-width", 2) .style("border-radius", "2px") @@ -489,8 +485,8 @@ var KEGG_canvas = /** @class */ (function () { .attr("points", function (d) { return d.points.map(function (p) { return [p.x, p.y].join(","); }).join(" "); }) .attr("type", function (d) { return d.group; }) .attr("stroke", "black") - .attr("stroke-width", 2) - .style("opacity", 0.25) + .attr("stroke-width", 1) + .style("opacity", 0.1) .attr("id", "polygon") .classed("pl", true) .classed("polygon", true) diff --git a/typescript/KEGG_canvas/vis.ts b/typescript/KEGG_canvas/vis.ts index 8f281a5..31ddaf3 100644 --- a/typescript/KEGG_canvas/vis.ts +++ b/typescript/KEGG_canvas/vis.ts @@ -15,7 +15,7 @@ class KEGG_canvas { public size: Canvas.Size = { - width: 1000, + width: 1024, height: 800 }; public nodeMin: number = 5; @@ -38,8 +38,17 @@ class KEGG_canvas { */ public tooltip: d3.Selection; - public constructor(graph: Graph.Model) { - this.setupGraph(graph); + public constructor( + graph: Graph.Model, + opts: { + charge: number, + linkDistance: number + } = { + charge: -200, // 影响节点移动的时候的活泼程度，值越小越活泼 + linkDistance: 50 // 影响聚类程度，值越小，聚类越明显 + }) { + + this.setupGraph(graph, opts); this.tooltip = d3.select("#chart") .append("div") .attr("class", "large-3 columns") @@ -81,16 +90,12 @@ class KEGG_canvas { } private moveTooltip() { - console.log("move"); - this.tooltip .style("top", `${(d3.event).pageY + 10}px`) .style("left", `${(d3.event).pageX + 10}px`); } private removeTooltip() { - console.log("remove"); - this.tooltip .style("z-index", -1) // Make tooltip invisible @@ -100,16 +105,6 @@ class KEGG_canvas { .style("opacity", 0.8); } - private displayPreview(e, preview: HTMLElement) { - var pos = [e.pageX, e.pageY + 20] - - this.tooltip.html(preview.innerHTML) - .style("top", (pos[1]) + "px") - .style("left", (pos[0]) + "px") - .style("z-index", 10) - .style("opacity", .9); - } - /** * 因为目前d3.js还不能够通过调整z-index来调整图层 * 所以在这里先构建一个最开始图层，来避免polygon将网络的节点遮盖住，从而导致无法操作节点 @@ -123,13 +118,16 @@ class KEGG_canvas { this.nodecolor = {}; } - private setupGraph(graph: Graph.Model) { + private setupGraph(graph: Graph.Model, opts: { + charge: number, + linkDistance: number + }) { var viz: KEGG_canvas = this; this.Clear(); this.force = d3.layout.force() - .charge(-300) - .linkDistance(100) + .charge(opts.charge) + .linkDistance(opts.linkDistance) .size([this.size.width, this.size.height]); this.svg = d3.select("#chart") @@ -172,12 +170,12 @@ class KEGG_canvas { }) .attr("id", "network") .style("stroke-width", function (d) { - var w = -Math.log(d.weight * 2); + var w = -Math.log(d.weight * 2) / 2; - if (w < 0.5) { - w = 0.5; - } else if (w > 3) { - w = 3; + if (w < 0.3) { + w = 0.3; + } else if (w > 2) { + w = 2; } return w; @@ -208,7 +206,7 @@ class KEGG_canvas { .call(this.force.drag) .attr("r", function (d) { if (d.degree > 0) { - return viz.nodeMin + Math.pow(d.degree, 2 / (2.7)); + return viz.nodeMin + d.degree // Math.pow(d.degree, 2 / (2.7)); } else { return viz.nodeMin; } @@ -268,29 +266,31 @@ class KEGG_canvas { * legend的外边框圆角矩形的radius */ public legendBoxRadius: number = 6; + public legendBoxWidth: number = 400; /** * 在svg上面添加legend的rectangle以及相应的标签文本 * 颜色和标签文本都来自于type_colors字典 */ private showLegend() { - var rW = 300, rH = (this.dh + 5) * (Object.keys(this.type_colors).length - 1); - var top = 30, left = this.size.width - rW; + var rw = this.legendBoxWidth; + var rh = (this.dh + 5) * (Object.keys(this.type_colors).length - 1); + var top = 30, left = this.size.width - rw; var legend: d3.Selection = this.svg.append("g") .attr("class", "legend") .attr("x", left) .attr("y", top) - .attr("height", rH) - .attr("width", rW); + .attr("height", rh) + .attr("width", rw); legend.append("rect") .attr("x", left) .attr("y", top) .attr("rx", this.legendBoxRadius) .attr("ry", this.legendBoxRadius) - .attr("height", rH) - .attr("width", rW) + .attr("height", rh) + .attr("width", rw) .style("stroke", "gray") .style("stroke-width", 2) .style("border-radius", "2px") @@ -444,8 +444,8 @@ class KEGG_canvas { .attr("points", d => d.points.map(p => [p.x, p.y].join(",")).join(" ")) .attr("type", d => d.group) .attr("stroke", "black") - .attr("stroke-width", 2) - .style("opacity", 0.25) + .attr("stroke-width", 1) + .style("opacity", 0.1) .attr("id", "polygon") .classed("pl", true) .classed("polygon", true) diff --git a/typescript/build/KEGG_canvas.d.ts b/typescript/build/KEGG_canvas.d.ts index 810b6dd..4b0898b 100644 --- a/typescript/build/KEGG_canvas.d.ts +++ b/typescript/build/KEGG_canvas.d.ts @@ -89,7 +89,10 @@ declare class KEGG_canvas { * Create tooltip element */ tooltip: d3.Selection; - constructor(graph: Graph.Model); + constructor(graph: Graph.Model, opts?: { + charge: number; + linkDistance: number; + }); attachSaveAsPng(aId: string, fileName?: string): void; /** * 可以在后台按照类型为节点生成颜色 @@ -98,7 +101,6 @@ declare class KEGG_canvas { private displayTooltip; private moveTooltip; private removeTooltip; - private displayPreview; /** * 因为目前d3.js还不能够通过调整z-index来调整图层 * 所以在这里先构建一个最开始图层，来避免polygon将网络的节点遮盖住，从而导致无法操作节点 @@ -116,6 +118,7 @@ declare class KEGG_canvas { * legend的外边框圆角矩形的radius */ legendBoxRadius: number; + legendBoxWidth: number; /** * 在svg上面添加legend的rectangle以及相应的标签文本 * 颜色和标签文本都来自于type_colors字典