js.创建节点_使用D3.js创建图的复合节点

最新推荐文章于 2024-06-12 17:13:26 发布

dfsgwe1231

最新推荐文章于 2024-06-12 17:13:26 发布

阅读量636

点赞数 1

文章标签：可视化 python js java javascript ViewUI

原文链接：https://hackernoon.com/creating-composite-node-of-a-graph-using-d3js-sfa33y0x

版权

js.创建节点

最近，我一直在使用D3可视化React项目的数据，这引起了我一段时间的注意。我对这个非常强大的工具的范围特别感兴趣，该工具具有与任何类型的数据可视化有关的强大的问题解决能力范围。

它给您一种您可以做__ANYTHING__的感觉。好吧，让我们谈谈。

什么是D3.js？

D3.js是用于可视化数据JavaScript库。结合使用__SVG__ （支持矢量图形）和__HTML__它非常强大。

现在，它取决于使用它的开发人员的创造力，从而以最漂亮的方式对其进行可视化。

由于这是数据驱动的，因此d3.js可以处理纯数据并以图形方式对其进行转换。应用d3.js时，您将做很多CSS，同时解决一些数学坐标几何问题。例如，应用勾股定理，计算图上两个坐标` (x1, y1) `和` (x2, y2) `之间的距离。

本文着重于创建图的复杂节点，该节点是连接了许多元素或信息的节点，而不仅仅是一个空的圆圈。

您会发现很多示例片段和要点，尤其是在bl.ocks.org ， stackoverflow或observablehq上，它们用于创建具有v3版本的图形或树，而在最新的v5版本上却很少。

前提条件

HTML，CSS，Javascript，坐标几何。

开始吧

我们将编写一个简单的工作脚本来创建复杂的SVG节点。

您需要在html <body>包含以下<script> <body>才能使用d3 v5库。

< body >
      < script src = "https://d3js.org/d3.v5.min.js" >  </ script >

</ body >

画布和数据容器元素

为所有SVG元素将驻留的画布指定一些width和height 。然后，我们在body元素上调用d3.select() ， d3.select()添加svg ，并指定诸如width和height类的属性。目前，我们将json数据作为带有某些参数的nodes ，可能需要对其进行可视化。

< script > 
      var width = 500 , height = 400 ;
      const nodes = [
        {
          id: 0 ,
          name: "ServiceGroup" ,
          description: "Port : 80" ,
          connection_count: 3
        }
      ];

      const svg = d3
        .select( "body" )
        .append( "svg" )
        .attr( "width" , width)
        .attr( "height" , height);
 </ script >

让我们将新元素g附加到svg变量（画布）中，然后将节点数据插入到其中，并使用id索引。

let circle = svg
            .append( "svg:g" )
            .selectAll( "g" )
            .data(nodes, d => d.id);
const g = circle.enter();

矩形节点

现在我们将rect元素附加到我们的svg ，其(x,y)坐标为(0,0) 。

const rectangularNode = g
        .append( "svg:rect" )
        .attr( "class" , "node" )
        .attr( "x" , d => {
          return 0 ;
        })
        .attr( "y" , d => {
          return 0 ;
        });

现在，在这里很难确定要放置在矩形节点内的元素的位置。我们已经准备好基本节点，并且将参照矩形节点而不是画布放置内部元素。其中一种方法是使用getBBox()获取坐标rect元素。

var outerNodebbox = rectangularNode.node().getBBox();

图像元素

由于我们具有此框的放置坐标，因此可以将事物放置在其中。

假设我要放在徽标下方。

这很简单

const images = g
        .append( "svg:image" )
        .attr(
          "xlink:href" ,
          "https://img.icons8.com/ios-glyphs/30/000000/superman.png"
        )
        .attr( "x" , function ( d )  {
          let X = outerNodebbox.x;
          return X + 10 ;
        })
        .attr( "y" , function ( d )  {
          let Y = outerNodebbox.y;
          let HEIGHT = outerNodebbox.height;
          return Y + HEIGHT / 3 ;
        });

如您所见，我们对内部位置的变量X和Y了一些调整。我希望图像位于中间，从左侧按标签（ 10 ）。

文字元素

类似地，添加文本，我们使用键使用节点数据，并将text附加到svg如下所示：

const label = g
        .append( "svg:text" )
        .attr( "class" , "name" )
        .attr( "dx" , function ( d )  {
          return outerNodebbox.width / 3 ;
        })
        .attr( "dy" , function ( d )  {
          return outerNodebbox.height / 3 ;
        })
        .attr( "dominant-baseline" , "central" )
        .text( d => {
          return d[ "name" ];
        });

另一个添加文字的例子

const description = g
        .append( "svg:text" )
        .attr( "class" , "description" )
        .attr( "dx" , function ( d )  {
          return outerNodebbox.width / 3 ;
        })
        .attr( "dy" , function ( d )  {
          return ( 2 * outerNodebbox.height) / 3 ;
        })
        .attr( "dominant-baseline" , "central" )
        .text( d => {
          return d[ "description" ];
        });

圆形柜台元素

现在，如果我想在矩形节点内插入一个圆并在其中保持文本，该怎么办。我们这样做如下：

const count_circle = g
        .append( "svg:circle" )
        .attr( "class" , "countCircle" )
        .style( "visibility" , "unset" )
        .attr( "r" , 10 )
        .attr( "cx" , function ( d )  {
          let X = outerNodebbox.x;
          let WIDTH = outerNodebbox.width;
          return X + ( 2.5 * WIDTH) / 3 ;
        })
        .attr( "cy" , function ( d )  {
          let Y = outerNodebbox.y;
          let HEIGHT = outerNodebbox.height;
          return Y + ( 2 * HEIGHT) / 3 ;
        });

和文字

const count_text = g
        .append( "svg:text" )
        .attr( "class" , "countText" )
        .attr( "r" , 10 )
        .attr( "dx" , function ( d )  {
          let X = outerNodebbox.x;
          let WIDTH = outerNodebbox.width;
          return X + ( 2.5 * WIDTH) / 3 ;
        })
        .attr( "dy" , function ( d )  {
          let Y = outerNodebbox.y;
          let HEIGHT = outerNodebbox.height;
          return Y + ( 2 * HEIGHT) / 3 ;
        })
        .attr( "dominant-baseline" , "central" )
        .text( d => {
          return d[ "connection_count" ];
        });

最后，只需将所有元素合并为一个即可。