d3.v3实现分层分类可拖拽图表效果代码-html代码-BFW代码库

d3.v3实现分层分类可拖拽图表效果代码

代码语言：html

所属分类：图表

代码描述：d3.v3实现分层分类可拖拽图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
.nodebox {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3.5px;
}
#node_PHYSICAL .nodebox {
    stroke: beige;
}
#node_PHYSICAL_HARD .nodebox {
    stroke: tan;
}
#node_PHYSICAL_SOFT .nodebox {
    stroke: yellow;
}
#node_BIOTA .nodebox {
    stroke: darkgreen;
}
#node_BIOTA_SPONGES .nodebox {
    stroke: orange;
}
#node_BIOTA_ALGAE .nodebox {
    stroke: green;
}
#node_BIOTA_ALGAE_CANOPY_ECK .nodebox {
    stroke: lightgreen;
}
#node_BIOTA_ALGAE_CRUSTOSE .nodebox {
    stroke: purple;
}
.nodeTitle {
    font: 8px sans-serif;
    font-weight: bold;
}
.nodeText {
    font: 8px sans-serif;
}
.f1Text {
    fill: orange;
    font-weight: bold;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 3.5px;
}
</style>


  
  
</head>

<body translate="no">
  <div>This is not my code, just a port of <a href="" target="_blank">this</a> to codepen.</div>
<div>Drag to rearrange these nodes, then click
    <button onclick="return refresh();">refresh data</button> Some nodes will be replaced.
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script>
      <script  type="module">

function graph(d3) {
  //step 0, new graph() ,import "https://d3js.org/d3.v3.min.js" to get d3

  var svg;

  //step 1, custom the config
  this.config = {
    bg_size: {
      width: 800,
      height: 600 },

    edge_def_width: 5,
    edge_show_arrow: true,
    node_draggable: true,
    show_performance_bar: false };


  var self = this;
  var cluster = d3.layout.cluster().size([self.config.bg_size.height, self.config.bg_size.width - 160]);


  /// step 2, custom the actions
  var showTitleAction;
  var showSubheadAction;
  var showPathDesc;

  this.showTitle .........完整代码请登录后点击上方下载按钮下载查看