使用d3.js 知识图谱数据可视化（一）

最新推荐文章于 2024-06-19 23:13:40 发布

FE_BODY

最新推荐文章于 2024-06-19 23:13:40 发布

阅读量3.2k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42289162/article/details/107388169

版权

本文介绍了如何使用d3.js库来创建知识图谱进行数据可视化。内容涵盖d3.js的基本概念，如何加载数据，以及构建知识图谱的步骤，包括节点和边的绘制、布局算法的应用等。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>海贼王知识图谱可视化</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="shortcut icon" href="">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    
</head>

<!-- 定义样式 -->
<style>
/*body的样式*/
body {
    background-color: #272b30;   /*背景颜色*/
    padding-bottom: 30px, 40px;
    text-align: center;
    font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}

/*之前在js代码里面定义了classes，这边就给这些写样式*/
.links line {
    stroke: rgb(240, 240, 240); /*线的颜色*/
    stroke-opacity: 0.2;        /*线的透明度*/
}
.links line.inactive {
    /*display: none !important;*/
    stroke-opacity: 0;
}

.linetexts {
    fill-opacity: 0;
    font-size: 8px ;
    font-family: SimSun;
    fill:#fff;
}
.linetexts.inactive {
    display: none !important;
}


.nodes circle {
    stroke: #fff;
    stroke-width: 1;        /*圆的描边宽度*/
}
.nodes circle:hover {
    cursor: pointer;
}
.nodes circle.inactive {
    display: none !important;
}

/*默认显示所有的圆圈，进入模式切换之后才会显示text*/
.texts text {
    display: none;
}
.texts text:hover {
    cursor: pointer;
}
.texts text.inactive {
    display: none !important;
}

/*indicator的样式*/
#indicator {
    position: absolute;
    left: 60px;
    bottom: 120px;
    text-align: left;
    color: #f2f2f2;
    font-size: 12px;
}

/*indicator中每一个小的div/色块/图例的样式*/
#indicator>div {
    margin-bottom: 4px; 
}

#indicator span {
    display: inline-block;
    width: 30px;
    height: 14px;
    position: relative;
    top: 2px;
    margin-right: 8px;
}

/*mode-模式切换的style*/
#mode {
    position: absolute;
    top: 160px;
    left: 60px;
}

#mode span {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    transition: color, background-color .3s; /*CSS3中的渐变*/
    -o-transition: color, background-color .3s;
    -ms-transition: color, background-color .3s;
    -moz-transition: color, background-color .3s;
    -webkit-transition: color, background-color .3s;
}

/*当按键处于激活或者鼠标悬浮状态的时候*/
#mode span.active, #mode span:hover {
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

/*info的样式*/
#info {
    position: absolute;
    top: 160px;
    /*bottom: 40px;*/
    right: 30px;
    text-align: right;
    width: 270px;
}

#info p {
    color: #fff;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 5px;
}

#info p span {
    color: #888;
    margin-right: 10px;
}

/*搜索框的样式*/
#search input {
    position: absolute;
    top: 210px;
    left: 60px;
    color: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    width: 200px;
    background-color: #666;
}

</style>

<body>
    <!-- 标题 -->
    <h1 style="color: #fff;font-size: 32px;margin-bottom: 0px;text-align: left;margin-left: 40px">ONE PIECE</h1>

    <!-- 定义div存放关系图 -->
    <!-- NOTE: 父元素采用相对定位，里面的元素采用绝对定位 -->
    <div style="text-align: center;position: relative;">
        <svg width="800" height="560" style="margin-left: 80px;margin-bottom: -40px" id="svg1"></svg>
        <!-- 图例 -->
        <div id="indicator"></div>

        <!-- 模式 -->
        <div id="mode">
            <span class="active" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">Circles</span>
            <span style="border-top-left-radius: 0;border-bottom-left-radius: 0;position: relative;left: -5px;">Texts</span>
        </div>

        <!-- 搜索框 -->
        <div id="search">
            <input type="text" autocomplete="off" class="form-control">
        </div>

        <!-- 每个结点的信息 -->
        <!-- <div id="info">
            <h4></h4>
        </div> -->
    </div>

</body>
<script src="./relation.js"> </script>
<script src="./avpair.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- 自定义的js代码 -->
<script>
$(document).ready(function() {
    console.log(MapData,9999)
    // 定义svg变量，选出第一个图
    var svg = d3.select("#svg1"), 
              width = svg.attr('width'), 
              height = svg.attr('height');

    var names = ['人', '地点', '恶魔果实', '组织', '船只', '职务', '事件']
    var colors = ['red', 'green', 'yellow', '#d2907c', '#d6744d', '#ded295', '#7481c3'];
   // var outlier_avatar_ID = ['0001', '0002', '0003', '0004', '0005', '0006', '0007', '0008', '0009', '0

最低0.47元/天解锁文章

FE_BODY

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
10
评论
使用d3.js 知识图谱数据可视化（一）

这里写自定义目录标题index.html<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> &lt
复制链接

扫一扫