js 图谱 - 爱码网

## 昨天找了半天，忘了代码在哪看到的，就不贴原地址了。。
## 直接复制代码然后放到 html 文件中就有演示了
<!DOCTYPE html>
<meta charset="utf-8">
<style>.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
}

#licensing {
    fill: green;
}

.link.licensing {
    stroke: green;
}


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

text {
    font: 12px Microsoft YaHei;
    pointer-events: none;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

    var links =
        [
            {source: \'艾伦·麦席森·图灵\', target: \'Alan Mathison Turing\', \'rela\': \'外文名\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'英国\', \'rela\': \'国籍\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'英国伦敦\', \'rela\': \'出生地\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'1912年6月23日\', \'rela\': \'出生日期\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'1954年6月7日\', \'rela\': \'逝世日期\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'数学家，逻辑学家，密码学家\', \'rela\': \'职业\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'剑桥大学国王学院，普林斯顿大学\', \'rela\': \'毕业院校\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'“计算机科学之父”\', \'rela\': \'主要成就\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'提出“图灵测试”概念\', \'rela\': \'主要成就\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'人工智能\', \'rela\': \'主要成就\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'破解德国的著名密码系统Enigma\', \'rela\': \'主要成就\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'《论数字计算在决断难题中的应用》\', \'rela\': \'代表作品\', type: \'resolved\'},
            {source: \'艾伦·麦席森·图灵\', target: \'《机器能思考吗？》\', \'rela\': \'代表作品\', type: \'resolved\'},
            {source: \'人工智能\', target: \'计算\', \'rela\': \'计算1111\', type: \'resolved\'},
            {source: \'人工智能\', target: \'想法\', \'rela\': \'想法111\', type: \'resolved\'},
        ];

    var nodes = {};

    links.forEach(function (link) {
        link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
        link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
    });

    console.log(nodes)

    var width = 1920, height = 1080;

    var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(links)
        .size([width, height])
        .linkDistance(180)
        .charge(-1500)
        .on("tick", tick)
        .start();

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var marker =
        svg.append("marker")
            .attr("id", "resolved")
            .attr("markerUnits", "userSpaceOnUse")
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 32)
            .attr("refY", -1)
            .attr("markerWidth", 12)
            .attr("markerHeight", 12)
            .attr("orient", "auto")
            .attr("stroke-width", 2)
            .append("path")
            .attr("d", "M0,-5L10,0L0,5")
            .attr(\'fill\', \'#000000\');

    var edges_line = svg.selectAll(".edgepath")
        .data(force.links())
        .enter()
        .append("path")
        .attr({
            \'d\': function (d) {
                return \'M \' + d.source.x + \' \' + d.source.y + \' L \' + d.target.x + \' \' + d.target.y
            },
            \'class\': \'edgepath\',
            \'id\': function (d, i) {
                return \'edgepath\' + i;
            }
        })
        .style("stroke", function (d) {
            var lineColor;
            lineColor = "#B43232";
            return lineColor;
        })
        .style("pointer-events", "none")
        .style("stroke-width", 0.5)
        .attr("marker-end", "url(#resolved)");

    var edges_text = svg.append("g").selectAll(".edgelabel")
        .data(force.links())
        .enter()
        .append("text")
        .style("pointer-events", "none")
        .attr({
            \'class\': \'edgelabel\',
            \'id\': function (d, i) {
                return \'edgepath\' + i;
            },
            \'dx\': 80,
            \'dy\': 0
        });

    edges_text.append(\'textPath\')
        .attr(\'xlink:href\', function (d, i) {
            return \'#edgepath\' + i
        })
        .style("pointer-events", "none")
        .text(function (d) {
            return d.rela;
        });

    var circle = svg.append("g").selectAll("circle")
        .data(force.nodes())
        .enter().append("circle")
        .style("fill", function (node) {
            var color;
            var link = links[node.index];
            color = "#F9EBF9";
            return color;
        })
        .style(\'stroke\', function (node) {
            var color;
            var link = links[node.index];
            color = "#A254A2";
            return color;
        })
        .attr("r", 28)
        .on("click", function (node) {
            edges_line.style("stroke-width", function (line) {
                console.log(line);
                if (line.source.name == node.name || line.target.name == node.name) {
                    return 4;
                } else {
                    return 0.5;
                }
            });
        })
        .call(force.drag);

    var text = svg.append("g").selectAll("text")
        .data(force.nodes())
        .enter()
        .append("text")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .style(\'fill\', function (node) {
            var color;
            var link = links[node.index];
            color = "#A254A2";
            return color;
        }).attr(\'x\', function (d) {
            var re_en = /[a-zA-Z]+/g;
            if (d.name.match(re_en)) {
                d3.select(this).append(\'tspan\')
                    .attr(\'x\', 0)
                    .attr(\'y\', 2)
                    .text(function () {
                        return d.name;
                    });
            } else if (d.name.length <= 4) {
                d3.select(this).append(\'tspan\')
                    .attr(\'x\', 0)
                    .attr(\'y\', 2)
                    .text(function () {
                        return d.name;
                    });
            } else {
                var top = d.name.substring(0, 4);
                var bot = d.name.substring(4, d.name.length);

                d3.select(this).text(function () {
                    return \'\';
                });

                d3.select(this).append(\'tspan\')
                    .attr(\'x\', 0)
                    .attr(\'y\', -7)
                    .text(function () {
                        return top;
                    });

                d3.select(this).append(\'tspan\')
                    .attr(\'x\', 0)
                    .attr(\'y\', 10)
                    .text(function () {
                        return bot;
                    });
            }
        });

    function tick() {
        circle.attr("transform", transform1);
        text.attr("transform", transform2);

        edges_line.attr(\'d\', function (d) {
            var path = \'M \' + d.source.x + \' \' + d.source.y + \' L \' + d.target.x + \' \' + d.target.y;
            return path;
        });

        edges_text.attr(\'transform\', function (d, i) {
            if (d.target.x < d.source.x) {
                bbox = this.getBBox();
                rx = bbox.x + bbox.width / 2;
                ry = bbox.y + bbox.height / 2;
                return \'rotate(180 \' + rx + \' \' + ry + \')\';
            } else {
                return \'rotate(0)\';
            }
        });
    }

    function linkArc(d) {
        return \'M \' + d.source.x + \' \' + d.source.y + \' L \' + d.target.x + \' \' + d.target.y
    }

    function transform1(d) {
        return "translate(" + d.x + "," + d.y + ")";
    }

    function transform2(d) {
        return "translate(" + (d.x) + "," + d.y + ")";
    }

</script>