force-graph-vis/dist/style/force-graph-vis.css

基于D3.js的知识图谱可视化解决方案

/* ========================== svg容器样式 ========================== */
/* svg容器 */
.kg-force-graph-svg-container {
  cursor: move;
  user-select: none;
}
/* 大部分的svg的子元素都在这个group里 方便做拖拽 */
.kg-force-graph-svg-main-group {
  /*transition: opacity 1s;*/
}

.kg-force-graph-svg-main-group .link-arrow-def {
  transition: fill 0.4s 0.2s, opacity 0.4s 0.2s;
}

/* ========================== layer样式 ========================== */
/* layer容器 */
.kg-force-render-layer {
}

/* 节点、线layer */
.kg-force-nodes-layer_base,
.kg-force-links-layer_base {
  will-change: opacity;
  transition: opacity 0.3s;
}

/* 透明layer样式 */
.layer-opacity {
  opacity: 0.3;
}

/* ========================== 节点样式 ========================== */
/* 节点外层容器 */
.kg-force-node-wrap {
  cursor: pointer;
}

/* 节点 */
.kg-force-node-entity {
  fill: #0eb0ed;
  fill-opacity: 0.1;
  stroke-width: 1px;
  transition: all 0.25s;
}

.kg-force-node-bg {
  transition: all 0.25s;
}

/* 节点外光晕 */
.kg-force-node-halo {
  fill: rgba(164, 230, 255, 0.2);
}

/* 节点文字 */
.kg-force-text {
  font-size: 14px;
  fill: #666666;
  transition: opacity 0.4s 0.2s;
  dominant-baseline: middle; /* 文字垂直居中 */
}

/* 节点低亮文字 */
.kg-force-text-opacity {
  opacity: 0.2;
}

/* 节点控制区域group容器 */
.kg-force-node-ctrl-area-group {
  display: none;
}

/* 节点控制区域 */
.kg-force-node-ctrl {
  fill: rgba(74, 125, 133, 0.2);
}

/* ========================== 线样式 ========================== */
/* 线外层容器 */
.kg-force-link-wrap {
}

/* 线 */
.kg-force-link {
  fill: none;
  stroke: rgba(0, 0, 0, 0.3);
  transition: stroke 0.3s;
  stroke-width: 1px;
  stroke-width: 0.5px; /* 0.5像素的线比较好看,可以优雅降级的1px的线 */
}

/* 低亮线 */
.kg-force-link.kg-force-link-opacity {
  stroke: rgba(127, 128, 174, 0.2);
}

/* 高亮线 */
.kg-force-link.kg-force-link-full {
  stroke-width: 1px;
  stroke: rgba(127, 128, 174, 0.7);
}

/* 背景线 */
.kg-force-link-background {
  transition: stroke 0.3s, opacity 0.3s;
}

/* 线文字标签 */
.kg-force-link-label-wrapper {
  stroke: rgba(0, 0, 0, 0.3);
  transition: stroke 0.3s, opacity 0.3s;
  stroke-width: 1px;
}

/* 线文字 */
.kg-force-link-text {
  font-size: 12px;
  fill: #999;
  transition: opacity 0.4s 0.2s;
}

/* 线文字textPath */
.kg-force-link-text .kg-force-link-text-path {
  text-anchor: middle;
}

/* 线箭头样式 */
#arrowhead path {
  fill: rgb(175, 175, 195);
  stroke: none;
}

/* ========================== 图谱框选工具 ========================== */
/* 框选区域 */
.kg-force-brush-area {
  background: #666666ee;
  position: relative;
}

/* 框选选择框 */
.kg-force-brush-area .selection {
  fill-opacity: 0.15;
  stroke: #aaaaaa;
  stroke-width: 2px;
}

/* 框选节点容器(未选中) */
.kg-force-node-wrap.kg-force-node-brush {
  opacity: 0.5;
}

/* 框选节点(未选中) */
.kg-force-node-wrap.kg-force-node-brush .kg-force-node-entity {
  stroke: transparent;
  stroke-width: 2px;
  transition: fill 0.3s, stroke 0.3s;
}

/* 框选节点容器(选中) */
.kg-force-node-wrap.kg-force-node-selected {
  opacity: 1;
}

/* .kg-force-node-wrap.kg-force-node-brush,
.kg-force-node-wrap.kg-force-node-selected {
  stroke: #ffffff99;
  stroke-width: 2px;
  transition: fill 0.3s, stroke 0.3s, opacity 0.3s;
} */
/* 框选节点(选中) */
.kg-force-node-wrap.kg-force-node-selected .kg-force-node-entity {
  stroke: #555555;
  stroke-width: 3px;
}

/* 框选线容器(未选中) */
.kg-force-link-wrap.kg-force-link-brush {
  opacity: 0.5;
  transition: opacity 0.3s;
}

/* 框选线(未选中) */
.kg-force-link-wrap.kg-force-link-brush .kg-force-link {
  transition: stroke 0.3s, stroke-width 0.3s;
}

/* 框选线容器(选中) */
.kg-force-link-wrap.kg-force-link-selected {
  opacity: 1;
}

/* 框选线(选中) */
.kg-force-link-wrap.kg-force-link-selected .kg-force-link {
  stroke: #777;
  stroke-width: 2px;
}