Javascript 在HTML页面上绘制箭头以可视化文本跨度之间的语义链接
我有一个HTML页面,其中有一些文本跨度标记如下:Javascript 在HTML页面上绘制箭头以可视化文本跨度之间的语义链接,javascript,html,visualization,Javascript,Html,Visualization,我有一个HTML页面,其中有一些文本跨度标记如下: ... <span id="T2" class="Protein">p50</span> ... <span id="T3" class="Protein">p65</span> ... <span id="T34" ids="T2 T3" class="Positive_regulation">recruitment</span> ... <span id="pr
...
<span id="T2" class="Protein">p50</span>
...
<span id="T3" class="Protein">p65</span>
...
<span id="T34" ids="T2 T3" class="Positive_regulation">recruitment</span>
...
<span id="promoter">Promoter</span><span>Something Else</span><span id="requires">Requires</span>
。。。
p50
...
p65
...
招聘
...
即,每个跨度都有一个ID,并通过其ID表示零个或多个跨度
我想将这些引用可视化为箭头
两个问题:
- 如何将跨度的ID映射到跨度渲染的屏幕坐标
- 如何绘制从一个渲染到另一个渲染的箭头
该解决方案应该可以在Firefox中使用,在其他浏览器中使用是一个优势,但并非真正必要。解决方案可以使用jQuery或其他一些轻量级JavaScript库。您有两个选项:或 从外观上看,你不需要这些箭头有任何特定的数学形式,你只需要它们在元素之间穿行 试试看。看看这个(已经被弃用了)。它为浮动对话框
div
s之间的每条导线使用canvas
标记,然后调整每个canvas
元素的大小和位置,以在正确的位置显示连接线的外观。您可能需要实现一个额外的旋转箭头,除非您不介意箭头以相同的角度进入每个元素
编辑:
编辑:忽略这个答案,你可以试试——这是非常聪明的东西,希望能有所帮助
编辑:由于此链接已失效,这里是另一个链接。我尝试尽可能使用开放式web技术,但事实是HTML和JavaScript(或jQuery)并不是此特定工作的工具(悲哀但真实),尤其是当您绘制的图表越来越复杂时 另一方面,闪光是为此而制作的。解析XML、布局文本(对字体和超级/下标有更多控制)和渲染曲线所需的ActionScript 3.0代码要少得多(请参见
curveTo
等方法)。总的来说,您将看到更少的代码、更好的可维护性、更少的黑客攻击、更广泛的兼容性和更稳定的图形库
祝这个项目好运。正如其他人所提到的,Javascript和html不是这类事情的好工具 约翰·雷西格写道。它使用canvas元素,因此它可以在现代版本的Firefox中使用,但不能在所有浏览器中使用。如果你只关心Firefox,这可能是一个不错的选择
您可能可以使用SVG,但并非所有浏览器都支持SVG。如果不需要曲线箭头,可以在列表上方或下方使用绝对定位的div。然后,您可以使用css为这些div加上几个组成箭头的图像设置样式。下面是一个使用jQueryUI项目中的图标集的示例(很抱歉URL太长) 以下是开始工作的CSS:
<style>
.below{
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.below span{
background-position:0px -16px;
top:-8px;
}
.above{
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.above span{
background-position:-64px -16px;
bottom:-8px;
}
.arrow{
position:absolute;
display:block;
background-image:url(http://jquery-ui.googlecode.com/svn/trunk/themes/base/images/ui-icons_454545_256x240.png);
width:16px;
height:16px;
margin:0;
padding:0;
}
.left{left:-8px;}
.right{right:-9px;}
</style>
.以下{
边框底部:1px实心#000;
左边框:1px实心#000;
右边框:1px实心#000;
}
.跨度以下{
背景位置:0px-16px;
顶部:-8px;
}
.以上{
边框顶部:1px实心#000;
左边框:1px实心#000;
右边框:1px实心#000;
}
.跨度以上{
背景位置:-64px-16px;
底部:-8px;
}
.阿罗{
位置:绝对位置;
显示:块;
背景图片:url(http://jquery-ui.googlecode.com/svn/trunk/themes/base/images/ui-icons_454545_256x240.png);
宽度:16px;
高度:16px;
保证金:0;
填充:0;
}
.left{left:-8px;}
.right{right:-9px;}
现在我们可以开始组装箭头div了。例如,在上面的示例中,要将箭头的样式从“requires”设置为“promotor”,可以在div的左上角使用向上的箭头图形在div上设置左、下和右边框
<div class='below' style="position:absolute;top:30px;left:30px;width:100px;height:16px">
<span class='arrow left'></span>
</div>
内联样式需要在您确定需要连接的东西的位置后,由脚本应用。假设您的列表如下所示:
...
<span id="T2" class="Protein">p50</span>
...
<span id="T3" class="Protein">p65</span>
...
<span id="T34" ids="T2 T3" class="Positive_regulation">recruitment</span>
...
<span id="promoter">Promoter</span><span>Something Else</span><span id="requires">Requires</span>
促销员其他要求
然后,以下脚本将定位箭头:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function(){
var promoterPos=$("#promoter").offset();
var requiresPos=$("#requires").offset();
$("<div class='below'><span class='arrow left'></span></div>")
.css({position:"absolute",left:promoterPos.left,right:promoterPos.top+$("#promoter").height()})
.width(requiresPos.left-promoterPos.left)
.height(16)
.appendTo("body");
});
</script>
$(函数(){
var promoterPos=$(“#promoter”).offset();
var requirepos=$(“#requires”).offset();
$("")
.css({位置:“绝对”,左:promoterPos.left,右:promoterPos.top+$(“#promoter”).height())
.宽度(要求左促销员位置左)
.身高(16)
.附于(“主体”);
});
继续并将上面的示例粘贴到一个空白html页面中。它有点整洁。您可以使用一把
位置:绝对div,将背景图像设置为透明gif,得到弯曲的箭头末端。。。一套开始(顶部和底部)。。。abacground:对可展开的中间部分重复
div,对末端(顶部和底部)重复另一对。这引起了我足够长的兴趣,产生了一个小测试。代码如下,您可以
它列出了页面上的所有跨距(如果合适的话,可能希望将其限制为ID以T开头的跨距),并使用“ids”属性来构建链接列表。在跨距后面使用画布元素,在每个源跨距的跨距上方和下方交替绘制弧形箭头
<script type="application/x-javascript">
function generateNodeSet() {
var spans = document.getElementsByTagName("span");
var retarr = [];
for(var i=0;i<spans.length; i++) {
retarr[retarr.length] = spans[i].id;
}
return retarr;
}
function generateLinks(nodeIds) {
var retarr = [];
for(var i=0; i<nodeIds.length; i++) {
var id = nodeIds[i];
var span = document.getElementById(id);
var atts = span.attributes;
var ids_str = false;
if((atts.getNamedItem) && (atts.getNamedItem('ids'))) {
ids_str = atts.getNamedItem('ids').value;
}
if(ids_str) {
retarr[id] = ids_str.split(" ");
}
}
return retarr;
}
// degrees to radians, because most people think in degrees
function degToRad(angle_degrees) {
return angle_degrees/180*Math.PI;
}
// draw a horizontal arc
// ctx: canvas context;
// inax: first x point
// inbx: second x point
// y: y value of start and end
// alpha_degrees: (tangential) angle of start and end
// upside: true for arc above y, false for arc below y.
function drawHorizArc(ctx, inax, inbx, y, alpha_degrees, upside)
{
var alpha = degToRad(alpha_degrees);
var startangle = (upside ? ((3.0/2.0)*Math.PI + alpha) : ((1.0/2.0)*Math.PI - alpha));
var endangle = (upside ? ((3.0/2.0)*Math.PI - alpha) : ((1.0/2.0)*Math.PI + alpha));
var ax=Math.min(inax,inbx);
var bx=Math.max(inax,inbx);
// tan(alpha) = o/a = ((bx-ax)/2) / o
// o = ((bx-ax)/2/tan(alpha))
// centre of circle is (bx+ax)/2, y-o
var circleyoffset = ((bx-ax)/2)/Math.tan(alpha);
var circlex = (ax+bx)/2.0;
var circley = y + (upside ? 1 : -1) * circleyoffset;
var radius = Math.sqrt(Math.pow(circlex-ax,2) + Math.pow(circley-y,2));
ctx.beginPath();
if(upside) {
ctx.moveTo(bx,y);
ctx.arc(circlex,circley,radius,startangle,endangle,1);
} else {
ctx.moveTo(bx,y);
ctx.arc(circlex,circley,radius,startangle,endangle,0);
}
ctx.stroke();
}
// draw the head of an arrow (not the main line)
// ctx: canvas context
// x,y: coords of arrow point
// angle_from_north_clockwise: angle of the line of the arrow from horizontal
// upside: true=above the horizontal, false=below
// barb_angle: angle between barb and line of the arrow
// filled: fill the triangle? (true or false)
function drawArrowHead(ctx, x, y, angle_from_horizontal_degrees, upside, //mandatory
barb_length, barb_angle_degrees, filled) { //optional
(barb_length==undefined) && (barb_length=13);
(barb_angle_degrees==undefined) && (barb_angle_degrees = 20);
(filled==undefined) && (filled=true);
var alpha_degrees = (upside ? -1 : 1) * angle_from_horizontal_degrees;
//first point is end of one barb
var plus = degToRad(alpha_degrees - barb_angle_degrees);
a = x + (barb_length * Math.cos(plus));
b = y + (barb_length * Math.sin(plus));
//final point is end of the second barb
var minus = degToRad(alpha_degrees + barb_angle_degrees);
c = x + (barb_length * Math.cos(minus));
d = y + (barb_length * Math.sin(minus));
ctx.beginPath();
ctx.moveTo(a,b);
ctx.lineTo(x,y);
ctx.lineTo(c,d);
if(filled) {
ctx.fill();
} else {
ctx.stroke();
}
return true;
}
// draw a horizontal arcing arrow
// ctx: canvas context
// inax: start x value
// inbx: end x value
// y: y value
// alpha_degrees: angle of ends to horizontal (30=shallow, >90=silly)
function drawHorizArcArrow(ctx, inax, inbx, y, //mandatory
alpha_degrees, upside, barb_length) { //optional
(alpha_degrees==undefined) && (alpha_degrees=45);
(upside==undefined) && (upside=true);
drawHorizArc(ctx, inax, inbx, y, alpha_degrees, upside);
if(inax>inbx) {
drawArrowHead(ctx, inbx, y, alpha_degrees*0.9, upside, barb_length);
} else {
drawArrowHead(ctx, inbx, y, (180-alpha_degrees*0.9), upside, barb_length);
}
return true;
}
function drawArrow(ctx,fromelem,toelem, //mandatory
above, angle) { //optional
(above==undefined) && (above = true);
(angle==undefined) && (angle = 45); //degrees
midfrom = fromelem.offsetLeft + (fromelem.offsetWidth / 2) - left - tofromseparation/2;
midto = toelem.offsetLeft + ( toelem.offsetWidth / 2) - left + tofromseparation/2;
//var y = above ? (fromelem.offsetTop - top) : (fromelem.offsetTop + fromelem.offsetHeight - top);
var y = fromelem.offsetTop + (above ? 0 : fromelem.offsetHeight) - canvasTop;
drawHorizArcArrow(ctx, midfrom, midto, y, angle, above);
}
var canvasTop = 0;
function draw() {
var canvasdiv = document.getElementById("canvas");
var spanboxdiv = document.getElementById("spanbox");
var ctx = canvasdiv.getContext("2d");
nodeset = generateNodeSet();
linkset = generateLinks(nodeset);
tofromseparation = 20;
left = canvasdiv.offsetLeft - spanboxdiv.offsetLeft;
canvasTop = canvasdiv.offsetTop - spanboxdiv.offsetTop;
for(var key in linkset) {
for (var i=0; i<linkset[key].length; i++) {
fromid = key;
toid = linkset[key][i];
var above = (i%2==1);
drawArrow(ctx,document.getElementById(fromid),document.getElementById(toid),above);
}
}
}
</script>
函数generateNodeSet(){
var span=document.getElementsByTagName(“span”);
var-retarr=[];
对于(var i=0;iinbx){
牵引箭头(ctx、inbx、y、α度*0.9、上、倒钩长度);
}否则{
牵引箭头(ctx、inbx、y,(180度角*0.9),上部,倒钩长度);
}
返回true;
}
函数drawArrow(ctx、fromelem、toelem、//必需
上方,角度){//可选
(以上=未定义)和&(以上=真);
(角度=未定义)&&(角度=45);//度
midfrom=fromelem.offsetLeft+(fromelem.offsetWidth/2)-左-至分离/2;
midto=toelem.offsetLeft+(toelem.offsetWidth/2)-左+右分离/2;
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
var angle = Math.atan2(x1-x2,y2-y1);
angle = (angle / (2 * Math.PI)) * 360;
var arrowPath = this.path(“M” + x2 + ” ” + y2 + ” L” + (x2 - size) + ” ” + (y2 - size) + ” L” + (x2 - size) + ” ” + (y2 + size) + ” L” + x2 + ” ” + y2 ).attr(“fill”,”black”).rotate((90+angle),x2,y2);
var linePath = this.path(“M” + x1 + ” ” + y1 + ” L” + x2 + ” ” + y2);
return [linePath,arrowPath];
}
var j34 = s3.joint(s4, uml.arrow).setVertices(["170 130", "250 120"]);