首页 / JAVASCRIPT / JavaScript-如何在d3.js中添加箭头链接？

JavaScript-如何在d3.js中添加箭头链接？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-如何在d3.js中添加箭头链接？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7216字，纯文字阅读大概需要11分钟。

内容图文

我想在链接的一端放一个箭头.
我已经管理了链接,但无法绘制箭头.
这是我的代码,可以正常工作,但是我上面提到的问题只是帮助我如何绘制箭头.谢谢.

请记住,我希望箭头指向目标一侧.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="D3js_demo.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <title>Weighted Citation Graph</title>
     <style>

path.link {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}   

circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}

text {
    font: 10px sans-serif;
    pointer-events: none;
}

text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
}

body {
    background-color: white;
    margin: 0px;
}

.graphContainer {
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <script src="//d3js.org/d3.v3.min.js"></script>
<script>

    $(function () {
        var color = d3.scale.category20();
        var data = {
            "nodes": [
                { "id": 0, "name": "paper1", "citation": 5, "group": 1 },
                { "id": 1, "name": "paper2", "citation": 8, "group": 2 },
                { "id": 2, "name": "paper3", "citation": 12, "group": 3 },
                { "id": 3, "name": "paper4", "citation": 25, "group": 4 },
                { "id": 4, "name": "paper5", "citation": 15, "group": 5 },
                { "id": 5, "name": "paper6", "citation": 5, "group": 1 },
                { "id": 6, "name": "paper7", "citation": 8, "group": 2 },
                { "id": 7, "name": "paper8", "citation": 12, "group": 3 },
                { "id": 8, "name": "paper9", "citation": 25, "group": 4 },
                { "id": 9, "name": "paper10", "citation": 15, "group": 5 }
            ],
            "links": [
                { "source": 0, "target": 1, "name": "A-B-1", "value": 0 , "grouo": 1},
                { "source": 0, "target": 1, "name": "A-B-2", "value": 24, "grouo": 2 },
                { "source": 0, "target": 2, "name": "A-C-1", "value": 100, "grouo": 1 },
                { "source": 0, "target": 2, "name": "A-C-3", "value": 44, "grouo": 2 },
                { "source": 2, "target": 3, "name": "A-D-1", "value": 169, "grouo": 1 },
                { "source": 2, "target": 3, "name": "A-D-2", "value": 80, "grouo": 2 },
                { "source": 2, "target": 4, "name": "A-E-1", "value": 16, "grouo": 1 },
                { "source": 2, "target": 4, "name": "A-E-5", "value": 200, "grouo": 2 },
                { "source": 4, "target": 5, "name": "A-B-1", "value": 8, "grouo": 1 },
                { "source": 4, "target": 5, "name": "A-B-2", "value": 24, "grouo": 2 },
                { "source": 5, "target": 6, "name": "A-C-1", "value": 12, "grouo": 1 },
                { "source": 5, "target": 6, "name": "A-C-3", "value": 44, "grouo": 2 },
                { "source": 5, "target": 7, "name": "A-D-1", "value": 125, "grouo": 1 },
                { "source": 5, "target": 7, "name": "A-D-2", "value": 225, "grouo": 2 },
                { "source": 7, "target": 8, "name": "A-E-1", "value": 36, "grouo": 1 },
                { "source": 7, "target": 8, "name": "A-E-5", "value": 81, "grouo": 2 },
                { "source": 8, "target": 3, "name": "A-C-1", "value": 9, "grouo": 1 },
                { "source": 8, "target": 3, "name": "A-C-3", "value": 16, "grouo": 2 },
                { "source": 8, "target": 9, "name": "A-D-1", "value": 50, "grouo": 1 },
                { "source": 8, "target": 9, "name": "A-D-2", "value": 100, "grouo": 2 }
            ]
        };

        // used to store the number of links between two nodes. 
        // mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
        var mLinkNum = {};

        // sort links first
        sortLinks();

        // set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node
        setLinkIndexAndNum();

        var w = 960,
            h = 500;

        var force = d3.layout.force()
                      .nodes(d3.values(data.nodes))
                      .links(data.links)
                      .size([w, h])
                      .linkDistance(200)
                      .charge(-1000)
                      .on("tick", tick)
                      .start();

        var svg = d3.select(".graphContainer").append("svg:svg")
                    .attr("width", w)
                    .attr("height", h);

        var path = svg.append("svg:g")
                  .selectAll("line")
                  .data(force.links())
                  .enter().append("svg:path")
                  .attr("class", "link")
                  .style("stroke-width", function (d) { return Math.sqrt(d.value)})
                  .style("stroke", function (d) { return color(d.grouo)});

        var circle = svg.append("svg:g")
                        .selectAll("circle")
                        .data(force.nodes())
                        .enter().append("svg:circle")
                        .attr("r", function (d) { return (d.citation); })
                        .style("fill", function (d) { return color(d.group); })
                        .call(force.drag);

        var text = svg.append("svg:g")
                      .selectAll("g")
                      .data(force.nodes())
                      .enter().append("svg:g");

        // A copy of the text with a thick white stroke for legibility.
        text.append("svg:text")
            .attr("x", 8)
            .attr("y", ".31em")
            .attr("class", "shadow")
            .text(function (d) { return d.name; });

        text.append("svg:text")
            .attr("x", 8)
            .attr("y", ".31em")
            .text(function (d) { return d.name; });

        // Use elliptical arc path segments to doubly-encode directionality.
        function tick() {
            path.attr("d", function (d) {
                var dx = d.target.x - d.source.x,
                    dy = d.target.y - d.source.y,
                    dr = Math.sqrt(dx * dx + dy * dy);
                // get the total link numbers between source and target node
                var lTotalLinkNum = mLinkNum[d.source.id + "," + d.target.id] || mLinkNum[d.target.id + "," + d.source.id];
                if (lTotalLinkNum > 1) {
                    // if there are multiple links between these two nodes, we need generate different dr for each path
                    dr = dr / (1 + (1 / lTotalLinkNum) * (d.linkindex - 1));
                }
                // generate svg path
                return "M" + d.source.x + "," + d.source.y +
                    "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y +
                    "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;
            });

            // Add tooltip to the connection path
            path.append("svg:title")
                .text(function (d, i) { return d.name; });

            circle.attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

            text.attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        }

        // sort the links by source, then target
        function sortLinks() {
            data.links.sort(function (a, b) {
                if (a.source > b.source) {
                    return 1;
                }
                else if (a.source < b.source) {
                    return -1;
                }
                else {
                    if (a.target > b.target) {
                        return 1;
                    }
                    if (a.target < b.target) {
                        return -1;
                    }
                    else {
                        return 0;
                    }
                }
            });
        }

        //any links with duplicate source and target get an incremented 'linknum'
        function setLinkIndexAndNum() {
            for (var i = 0; i < data.links.length; i++) {
                if (i != 0 &&
                    data.links[i].source == data.links[i - 1].source &&
                    data.links[i].target == data.links[i - 1].target) {
                    data.links[i].linkindex = data.links[i - 1].linkindex + 1;
                }
                else {
                    data.links[i].linkindex = 1;
                }
                // save the total number of links between two nodes
                if (mLinkNum[data.links[i].target + "," + data.links[i].source] !== undefined) {
                    mLinkNum[data.links[i].target + "," + data.links[i].source] = data.links[i].linkindex;
                }
                else {
                    mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
                }
            }
        }
    });

</script>

    </div>
        <div id="graphContainer" class="graphContainer"></div>
    </form>
</body>
</html>

解决方法:

我用基本的箭头示例进行了修饰：https://jsfiddle.net/4xt5v51m/3/

我定义了箭头：

svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", 0.5)
    .attr("markerWidth", 2)
    .attr("markerHeight", 2)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

然后将您的链接属性设置为此标记：

.attr("marker-end", "url(#end)");

您可以通过使用标记的属性来更改颜色,大小,形状和位置.

内容总结

以上是互联网集市为您收集整理的JavaScript-如何在d3.js中添加箭头链接？全部内容，希望文章能够帮你解决JavaScript-如何在d3.js中添加箭头链接？所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/664206.html

来源：【匿名】

【上一篇】JavaScript-用户在父div中单击时单击按钮【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript-如何在d3.js中添加箭头链接？】教程文章相关的互联网学习教程文章

JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本【代码】【图】

原文:JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本一、主页一般都会比较有特色，现在在网站设计（二）实现的基础上，来给主页添加一点动画效果。1、这里实现的动画效果是：当鼠标悬停在其中某个超链接时，会显示出属于该页面的背景缩略图，让用户知道这个链接的页面大概内容是什么。效果图：2、实现这个效果的思路（1）把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片，并...

JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式【代码】

返回网页顶部方法一.锚链接simpleDemo: 1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 7 <style>8 *{9 margin: 0; 10 padding: 0; 11 } 12 #father{ 13 width: 400px; 14 height: 5000px; 15 border:1px solid #000; 16 } 17 #son{ 18 width: 600px; 19 ...

js阻止a链接

<!DOCTYPE HTML><html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.google.com">google</a> <script type="text/javascript"> var links = document.querySelectorAll(‘a‘) Array.prototype.forEach.call(links, function (link) { ...

js判断当前访问的链接【代码】

使用 js替换网页中的关键词为链接【图】

要求把一段html脚本中的疾病名添加到疾病库的链接，只添加一次，要避开超链接或图片链接。最初是用的 str.replace(‘糖尿病‘, ‘<a href=...>糖尿病</a>‘);结果找了半天，愣是没找到替换后的效果，原来是有个图片的title中包含糖尿病，被它捷足先登了。因此要把<a>链接、<img>标签避开，但<p><div>等标签不用避开上图： [javascript] view plaincopy s = "<a href=‘http://www.yx129.com/bingli/1_310.html‘>先看一个糖...

javascript – jQuery追加到iframe头的css链接【代码】

我正在尝试将css文件附加到从全局脚本在页面上创建的iframe.我可以访问它的一部分,但由于某种原因,我无法附加到头部.它也不会抛出错误,这令人沮丧.<script type="text/javascript"> $(document).ready(function() { $('#outline_text_ifr').contents().find('head').append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />'); }); </script>解决方法: var $head = $("#IFr...

javascript – 如何实现像jQuery一样的链接模式呢？【代码】

参见英文答案 > how does jquery chaining work? 9个如何创建jQuery使用的前缀？例如,在jQuery中我可以使用：$(".footer").css('display', 'none');我想启用类似的语法,如下所示：google('.footer').chrome('display', 'none');我在谷歌搜索了一个答案,但找不到它.解决方法:你有一个详细的解释here 但正确的实施方式如下：var google = function(valor){var lalala = '3';this.chrome = functi...

JQuery里选择超链接的实现代码

语法规则如下： $('a[href$="ABC"]')... 支持的选择方式如下： = 判断完全相符； != 不相符； ^=以某字符串开头； $=以某字符串结尾； *=包含某字符串。进一步，可以通过$('a[href$="ABC"]:first')返回结果集中的第一条记录如果需要遍历结果集：代码如下:$(a[href*=/Lists/Booking/DispForm.aspx]).each(function(){ // $(this)… }); 如果要获取相关属性可以通过$(a[href$="ABC"]:first).attr(‘title)等来获取如果需要返回...

jQuery实现鼠标经过时出现隐藏层文字链接的方法【图】

本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法。分享给大家供大家参考。具体如下：这里演示Jquery显示隐藏层的方法，鼠标经过时出现文字链接，模拟评分效果，这里没有加动作，仅显示了前台效果的实现。运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/...

javascript – 如果我通过特定链接转到页面,如何在页面上应用jQuery的load()函数【代码】

我在index.html到target.html有两个链接. 第一个链接很简单.它只是去target.html. 但我想用第二个链接做点别的事. 只是： 1位用户点击指向target.html的第二个链接 2 – 不仅显示了target.html,而且还显示了这个-page-in-target.html-if-user-clicks-the-second-link.html在jQuery load()的帮助下出现在.page-class元素中功能. 到目前为止我能做些什么？当我在target.html中时,我可以使用以下代码加载我想要的页面： HTML<a href...

JS把链接生成二维码图片方法分析

这次给大家带来JS把链接生成二维码图片方法分析，JS把链接生成二维码图片的注意事项有哪些，下面就是实战案例，一起来看一下。<p id="code"></p> <img id="img"/> <script type="text/javascript">var qrcode=$("#code").qrcode({render:canvas||table,width: 200, //宽度height:200, //高度text: "http://www.baidu.com" //任意内容}).hide();var canvas=qrcode.find(canvas).get(0);//如果有循环,此句必不可少 qrcode.find(canva...

javascript – 在HighCharts中链接多个图表控件【代码】

在我的网页上,我显示了5个不同的折线图,带有可缩放的X轴.每个图表还有许多系列,对于所有图表都是相同的. 我正在寻找控件,你可以在每个图形中显示/隐藏一系列和缩放功能,无论我改变哪个图形控件. 这是Highcharts的支持吗？解决方法:请熟悉同步三个图表并有unzoom按钮的示例.$(function() { var chart1;var chart2;var chart3;var controllingChart;var defaultTickInterval = 5;var currentTickInterval = defaultTickInterval;$(do...

javascript – 链接承诺并保留`this`【代码】

我有一个点击处理程序,需要一个接一个地进行几个异步调用.我选择使用promises来构造这些调用(准确地说是RSVP). 下面,您可以在控制器内看到clickA处理程序(它是一个Ember应用程序,但问题是更一般的,我认为)：App.SomeController = Ember.Controller.extend({actions: {clickA: function() {var self = this;function startProcess() {return makeAjaxCall(url, {'foo': self.get('foo')});}function continueProcess(response) {ret...

javascript – 在Ionic 2中使用附加的跟踪代码链接到外部URL【代码】

我希望从我的应用程序的详细信息页面中获取从我的JSON数据中提取的外部URL的唯一http链接. 我已经安装了inappbrowser插件,该插件目前可以使用到apple.com的静态URL.但是,我希望使用我的JSON数据中的产品特定链接URL.这是JSON data,它是我想使用的“aw_deep_link”. 如何使用详细信息页面上的“购买按钮”链接到从Angular表达式中提取的外部URL,然后将一些Google Analytics跟踪代码附加到URL的末尾？以下是我要添加的Google跟踪代码...

用javascript或jquery更改链接的域部分【代码】

抱歉我原来的问题不清楚,希望通过重新措辞我可以更好地解释我想做什么. 因此,我需要一种方法来使用JavaScript(或jQuery)来执行以下操作： >确定正在访问的当前页面的域>识别页面上使用域名www.domain1.com的所有链接,并替换为www.domain2.com 即如果用户访问www.domain2.com/index,则：<a href="www.domain1.com/contentpages/page.html">Test 1</a>应该在加载时动态重写<a href="www.domain2.com/contentpages/page.html">Test 1<...

首页 / JAVASCRIPT / JavaScript-如何在d3.js中添加箭头链接？

JavaScript-如何在d3.js中添加箭头链接？

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript-如何在d3.js中添加箭头链接？】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

链接 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程