D3力导向图添加点击时间

最新推荐文章于 2024-04-04 00:42:41 发布
cherrylovewangcai
最新推荐文章于 2024-04-04 00:42:41 发布
阅读量587
点赞数
分类专栏： D3
本文链接：https://blog.csdn.net/cherrylovedog/article/details/102832695
版权
D3 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
        <style>
           
           .nodes g {
            cursor: move;
            }
            .link-text text {
            font-size: 14px;
            fill: #000;
            fill-opacity: 0;
            }
            .nodes text {
            font-weight: 700;
            }
            .links {
            stroke: #fff;
            }
            .links line {
            stroke: #ddd;
            }
        </style>
    </head>
    <body>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script>
            var width=1000;
            height=1000;
        const data = {
      nodes: [
        { name: 'A人物' },
        { name: 'B人物' },
        { name: 'C人物' },
        { name: 'D人物' },
        { name: 'E人物' },
        { name: 'F人物' },
        { name: 'G人物' },
        { name: 'H人物' },
        { name: 'I人物' },
        { name: 'J人物' },
        { name: 'K人物' },
        { name: 'L人物' },
        { name: 'M人物' }
      ],
      edges: [
        // value越小关系越近
        { source: 0, target: 1, relation: '朋友', value: 3 },
        { source: 0, target: 2, relation: '朋友', value: 3 },
        { source: 0, target: 3, relation: '朋友', value: 6 },
        { source: 1, target: 2, relation: '朋友', value: 6 },
        { source: 1, target: 3, relation: '朋友', value: 7 },
        { source: 2, target: 3, relation: '朋友', value: 7 },
        { source: 0, target: 4, relation: '朋友', value: 3 },
        { source: 0, target: 5, relation: '朋友', value: 3 },
        { source: 4, target: 5, relation: '夫妻', value: 1 },
        { source: 0, target: 6, relation: '兄弟', value: 2 },
        { source: 4, target: 6, relation: '同学', value: 3 },
        { source: 5, target: 6, relation: '同学', value: 3 },
        { source: 4, target: 7, relation: '同学', value: 4 },
        { source: 5, target: 7, relation: '同学', value: 3 },
        { source: 6, target: 7, relation: '同学', value: 3 },
        { source: 4, target: 8, relation: '师生', value: 4 },
        { source: 5, target: 8, relation: '师生', value: 5 },
        { source: 6, target: 8, relation: '师生', value: 3 },
        { source: 7, target: 8, relation: '师生', value: 5 },
        { source: 8, target: 9, relation: '师生', value: 4 },
        { source: 3, target: 9, relation: '师生', value: 5 },
        { source: 2, target: 10, relation: '母子', value: 1 },
        { source: 10, target: 11, relation: '雇佣', value: 6 },
        { source: 10, target: 12, relation: '雇佣', value: 6 },
        { source: 11, target: 12, relation: '同事', value: 7 }
      ]
    }

    let simulation = d3
      .forceSimulation() // 构建力导向图
      .force(
        'link',
        d3
          .forceLink()
          .id(function(d, i) {
            return i
          })
          .distance(function(d) {
            return d.value * 50
          })
      )
      .force('charge', d3.forceManyBody())
      .force('center', d3.forceCenter(width / 2, height / 2))

    let z = d3.scaleOrdinal(d3.schemeCategory20) // 通用线条的颜色
    //画连接线
    var svg = d3.select('body')
    .append('svg')
    .attr("width",1000)
    .attr("height",1000)
    //连接线
    let link = svg
      .append('g') // 画连接线
      .attr('class', 'links')
      .selectAll('line')
      .data(data.edges)
      .enter()
      .append('line')
      //连接线上的文字
      let linkText = svg
      .append('g') // 画连接连上面的关系文字
      .attr('class', 'link-text')
      .selectAll('text')
      .data(data.edges)
      .enter()
      .append('text')
      .text(function(d) {
        return d.relation
      })
      //画圆圈和上面的文字
      let node = svg
      .append('g') // 画圆圈和文字
      .attr('class', 'nodes')
      .selectAll('g')
      .data(data.nodes)
      .enter()
      .append('g')
      .on('mouseover',function(d,i){
           //显示连接线上的文字
        linkText.style('fill-opacity', function(edge) {
          if (edge.source === d || edge.target === d) {
            return 1
          }
        })
        //连线加粗
        link
          .style('stroke-width', function(edge) {
            if (edge.source === d || edge.target === d) {
              return '2px'
            }
          })
          .style('stroke', function(edge) {
            if (edge.source === d || edge.target === d) {
              return '#000'
            }
          })

      })
      .on('mouseout', function(d, i) {
        //隐去连接线上的文字
        linkText.style('fill-opacity', function(edge) {
          if (edge.source === d || edge.target === d) {
            return 0
          }
        })
        //连接线减粗
        link
          .style('stroke-width', function(edge) {
            if (edge.source === d || edge.target === d) {
              return '1px'
            }
          })
          .style('stroke', function(edge) {
            if (edge.source === d || edge.target === d) {
              return '#ddd'
            }
          })
      })
      .call(
        d3
          .drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended)
      )

    node
      .append('circle')
      .attr('r', 5)
      .attr('fill', function(d, i) {
        return z(i)
      })

    node
      .append('text')
      .attr('fill', function(d, i) {
        return z(i)
      })
      .attr('y', -20)
      .attr('dy', '.71em')
      .text(function(d) {
        return d.name
      })
      simulation // 初始化力导向图
      .nodes(data.nodes)
      .on('tick', ticked)

    simulation.force('link').links(data.edges)
    function ticked() {
      // 力导向图变化函数，让力学图不断更新
      link
        .attr('x1', function(d) {
          return d.source.x
        })
        .attr('y1', function(d) {
          return d.source.y
        })
        .attr('x2', function(d) {
          return d.target.x
        })
        .attr('y2', function(d) {
          return d.target.y
        })
      linkText
        .attr('x', function(d) {
          return (d.source.x + d.target.x) / 2
        })
        .attr('y', function(d) {
          return (d.source.y + d.target.y) / 2
        })
      node.attr('transform', function(d) {
        return 'translate(' + d.x + ',' + d.y + ')'
      })
    }

    function dragstarted(d) {
      if (!d3.event.active) {
        simulation.alphaTarget(0.3).restart()
      }
      d.fx = d.x
      d.fy = d.y
    }

    function dragged(d) {
      d.fx = d3.event.x
      d.fy = d3.event.y
    }

    function dragended(d) {
      if (!d3.event.active) {
        simulation.alphaTarget(0)
      }
      d.fx = null
      d.fy = null
    }
        </script>
    </body>
    </html>
    ```
cherrylovewangcai
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3力导向图添加点击时间

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫
专栏目录