D3.js创建力导向图(V4)附带详细的参数说明

SaiwenOutMan

于 2020-04-08 21:28:42 发布

阅读量3.5k

点赞数 4

分类专栏： D3.js javascript 文章标签： D3.js 力导向图 V4

本文链接：https://blog.csdn.net/dk2290/article/details/83510655

版权

本文详细介绍了如何使用D3.js V4创建力导向图，包括效果展示、代码示例和注释详解。重点解析了forceManyBody()函数，解释了多体力函数的作用和相关参数，如计算节点间力的近似值函数和Barnes-Hut算法。同时，提到了数据布局后的格式和节点属性的含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.效果展示

在这里插入图片描述

二.代码示例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>D3 test</title>
</head>

<body>
    <div class="container">
        <div id="graph"></div>
    </div>
</body>

</html>
<script src="/static/js/d3-v4.js"></script>
<script>

    var nodes = [ {
    name: "桂林" }, {
    name: "广州" },
              {
    name: "厦门" }, {
    name: "杭州" },
              {
    name: "上海" }, {
    name: "青岛" },
              {
    name: "天津" } ];

    var links = [ {
    source : 0 , target: 1 } , {
    source : 0 , target: 2 } ,
               {
    source : 0 , target: 3 } , {
    source : 1 , target: 4 } ,
               {
    source : 1 , target: 5 } , {
    source

最低0.47元/天解锁文章