个人中心
gpt4 book ai didi

javascript - 如何在 D3.js 中添加箭头链接？

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:57:13 36 4
gpt4 key购买 nike

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

请记住，我希望箭头位于目标侧。

<%@ 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>

最佳答案

我用基本的箭头示例做了一个 fiddle :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 中添加箭头链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36965610/

36 4 0
文章推荐： javascript - 如何使用 http-client 与 Aurelia 请求跨域
文章推荐： android - 从 URI 加载图像作为布局背景
文章推荐： Android Room library - 选择嵌入式实体的所有字段
文章推荐： javascript - 当 readOnly 属性为 true 时，如何在 Draft.js 编辑器中将自定义渲染 block 设置为只读？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com