D3实现简单业务拓扑图

最新推荐文章于 2024-09-30 05:53:54 发布

TaoLR

最新推荐文章于 2024-09-30 05:53:54 发布

阅读量1.1w

点赞数 1

分类专栏： D3 js 文章标签： d3 angularjs html

本文链接：https://blog.csdn.net/lin_credible/article/details/51108637

版权

本文适合有一定D3.js基础的读者，通过HTML、JS和CSS的结合，展示了如何利用D3库实现一个简单的业务拓扑图。文章包含AngularJS控制器的代码示例，SCSS到CSS的转换，并提供了最终效果图。同时，还提及了D3中鼠标事件的处理和SVG marker-end显示问题的解决方案。

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

PS: 这篇文章适合有一定D3基础的童鞋，因为没有多余的注释，只是笔者比较业余的代码分享，勿喷

目录
- HTML
- JS
- CSS
- 效果图

^ HTML

<div class="content-panel">
    <div id="object"></div>
    <div id="object-arrow"></div>
</div>

^ JS

(angularjs Controller的代码)

var url = $location.path();
    $scope.$storage = $localStorage;
    var defaultLocation;
    if (_.has($localStorage, 'multiObject')) {
      defaultLocation = $localStorage.multiObject;
    }

    var nodeNameMap = {};
    var newNodes = _.map(abjectData.nodes, function(node) {
   
      nodeNameMap[node.objectId] = node.name;
      var rNode = {};
      if (_.has(defaultLocation, node.objectId)) {
        rNode.name = node.name;
        rNode.objectId = node.objectId;
        rNode.instanceCount = + node.instanceCount;
        rNode.attrs = node.attrs;
        rNode.fixed = true;
        rNode.x = defaultLocation[node.objectId].x;
        rNode.y = defaultLocation[node.objectId].y;
      } else {
        rNode = node;
      }
      return rNode;
    });

    var width = window.innerWidth - 250,
        height = window.innerHeight - 200,
        boxWidth = 160,
        countR = 15;

    var objectContainer = d3.select('#object').append('div')
        .style('position', 'absolute')
        .attr('width', width)
        .attr('height', height);

    var force = d3.layout.force();

    force
        .nodes(newNodes)
        .links(abjectData.links)
        .size([width, height])
        .linkDistance(200)
        .charge(-2000)
        .chargeDistance(250)
        .start();

    var svg = d3.select('#object-arrow').append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.append('defs').append('marker')
        .attr('id', 'end-arrow')
        .attr('refX', 4)
        .attr('refY', 4)
        .attr('viewBox', '0 0 8 8')
        .at