javascript - 围绕一个圆的节点标题-6ren

javascript - 围绕一个圆的节点标题

转载作者：行者123 更新时间：2023-11-30 20:20:11

我在 d3js ( D3.js how do I arrange nodes of a force layout to be on a circle ) 中围绕一个圆圈创建了力布局，现在我想像这样放置标签:

但现在这就是我得到的:你也可以在这里看看:https://bl.ocks.org/pierreee1/07eb3b07ba876011419168d60c587090

我该怎么做才能获得我想要的结果？我搜索了一些问题，但没有一个解决方案对我有帮助。

这是我的代码:

// width y height
var w = 1350;
var h = 600;

// declarar la fuerza y la union de los nodos por id, ahora sin charge ni centro porque no se van a correr
var fuerza = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d){
        return d.id;
    }))
;

// insertar los datos y ponerlos en consola
d3.json("actores_v5.json", function(error, data){
    if (error) throw error;

    //verificar los datos
    console.log("Número de Nodos: " + data.nodes.length)
    console.log(data.nodes)
    console.log("Número de Links: " + data.edges.length)
    console.log(data.edges)

    //svg en donde dibujar
    var svg = d3.selectAll("body")
        .append("svg")
        .attr('width', w)
        .attr('height', h)
    ;

    //circulo invisible para dibujar los nodos
    // it's actually two arcs so we can use the getPointAtLength() and getTotalLength() methods
    var dim = w/2;
    var circle = svg.append("circle")
        //.attr("d", "M 40, "+(dim/2+40)+" a "+dim/2+","+dim/2+" 0 1,0 "+dim+",0 a "+dim/2+","+dim/2+" 0 1,0 "+dim*-1+",0")
        .attr('cx', w/2)
        .attr('cy', h/2)
        .attr('r', 250)
        .style("fill", "#ffffff")
    ;

    //crea las lineas con un svg y los datos de "edges"
    var lineas = svg.append('g')
        .selectAll("line")
        .data(data.edges)
        .enter()
            .append("path")
            .attr("class", function(d) {
                return "link " + d.tipo; 
            })          
    ;

    //crea los nodos de acuerdo a los nombres
    var nodos = svg.append("g")
        .selectAll("circle")
        .data(data.nodes)
        .enter()
            .append("circle")
            .attr('class', function(d){
                if (d.categoria == "gobierno"){
                    return "nodos " + d.categoria;
                }   
                if (d.categoria == "patrimonio"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "planeacion"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "ong"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "gremios"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "academia"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "comunidad"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "privado"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "medios"){
                    return "nodos " + d.categoria;
                }
                if (d.categoria == "otros"){
                    return "nodos " + d.categoria;
                }
            })
            .on("mouseover", mouseEncima)
            .on("mouseout", mouseAfuera)
            .attr('r', 5)
    ;

    nodos
        .filter(function(d){
            return d.categoria == "gobierno"
                || d.categoria == "patrimonio"
                || d.categoria == "planeacion"
                || d.categoria == "ong"
                || d.categoria == "gremios"
                || d.categoria == "academia" 
                || d.categoria == "comunidad"
                || d.categoria == "privado"
                || d.categoria == "medios"
                || d.categoria == "otros"
            ;
        })
        .style("opacity", 1)
    ;

    //titulos de los nodos
    nodos.append("title")
        .text(function(d){
            return d.id;
        })
    ;

    var text = svg.append("g").selectAll("text")
        .data(data.nodes)
        .attr('class', "text")
        .enter().append("text")
        .attr("x", 8)
        .attr("y", ".31em")
        .text(function(d) {
            return d.id;
        })
    ;

    //define los nodos y los links de la simulacion
    fuerza.nodes(data.nodes);
    fuerza.force("link").links(data.edges);

    // calcula los espacios de los circulos en el circulo
    var circleCoord = function(node, index, num_nodes){
        var circumference = circle.node().getTotalLength();
        var pointAtLength = function(l){
            return circle.node().getPointAtLength(l)};
        var sectionLength = (circumference)/num_nodes;
        var position = sectionLength*index+sectionLength/2;
        return pointAtLength(circumference-position)
    }

    // define la posicion de los nodos segun el calculo anterior
    data.nodes.forEach(function(d, i) {
        var coord = circleCoord(d, i, data.nodes.length)
        d.fx = coord.x
        d.fy = coord.y
    });

    for (i = 0; i < data.nodes.length; i++) {
        var angle = (i / (data.nodes.length / 2)) * Math.PI;
        //data.nodes.push({ 'angle': angle });
    }   

    //simulación y actualizacion de la posicion de los nodos en cada "tick"
    fuerza.on("tick", function(){

        lineas.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
            return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
        });

        nodos.attr("cx", function(d){
                return d.x = d.fx;
            })
            .attr('cy', function(d){
                return dy = d.fy;
            })
        ;

        text.attr("x", function(d){
                return dx = d.fx;
            })
            .attr('y', function(d){
                return dy = d.fy;
            })
            .style("text-anchor", "start")
    });

    //saber si las conexiones se ven o no
    var toggle = 0;

    //Create an array logging what is connected to what
    var linkedByIndex = {};
        for (i = 0; i < data.nodes.length; i++) {
            linkedByIndex[i + "," + i] = 1;
        };

    data.edges.forEach(function (d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });

    //This function looks up whether a pair are neighbours  
    function neighboring(a, b) {
        return linkedByIndex[a.index + "," + b.index];
    }

    function mouseEncima() {

        if (toggle == 0) {

            //Reduce the opacity of all but the neighbouring nodes
            d = d3.select(this).node().__data__;
            nodos
                .transition()
                .style("opacity", function (o) {
                    return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
                })              
                .attr('r', function(o){
                    return neighboring(d, o) | neighboring(o, d) ? 10 : 5;
                })
            ;  

            lineas
                .transition()
                .style("stroke-opacity", function (o) {
                    return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
                })
            ;

            // text
            //  .transition()
            //  .style("opacity", function (o) {
            //      return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
            //  })
            // ;

            //Reduce the opacity        
            toggle = 1;
        }
    }

    function mouseAfuera() {

            nodos
                .filter(function(d){
                    return d.categoria == "gobierno"
                        || d.categoria == "patrimonio"
                        || d.categoria == "planeacion"
                        || d.categoria == "ong"
                        || d.categoria == "gremios"
                        || d.categoria == "academia" 
                        || d.categoria == "comunidad"
                        || d.categoria == "privado"
                        || d.categoria == "medios"
                        || d.categoria == "otros"
                    ;
                })
                .transition()
                .style("opacity", 1)
                .attr('r', 5)
            ;

            // y las lineas a 0        
            lineas
                .transition()
                .style("stroke-opacity", 0.1)
            ;

            // text
            //  .transition()
            //  .style("opacity", 0.1)
            // ;

            toggle = 0;
        }   
});

最佳答案

文本位于大圆圈外一点，因此我们可以读取第一个字符 (textPosition())。

根据文本相对于圆心的位置/Angular ，您必须旋转它，更改文本 anchor (start、end)和一个小的基线偏移 (dy) 使文本相对于彩色圆圈垂直居中。

对于透明度，您不需要 toggle 变量，因为 mouseover 事件只为每个圆圈调用一次。

删除了添加圆类的冗余，它与d.categoria相同。

在 filter() 调用中对 d.categoria 进行大型或比较的目的是什么？这是在测试是否定义了 d.categoria 吗？

// width y height
var w = 1350;
var h = 800;
var RAD2DEG = 180.0/Math.PI;
var gCircleRadius = 250;
var gSmallCircleRadius = 5;

// declarar la fuerza y la union de los nodos por id, ahora sin charge ni centro porque no se van a correr
var fuerza = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d){
        return d.id;
    }))
;

// insertar los datos y ponerlos en consola
d3.json("actores_v5.json", function(error, data){
    if (error) throw error;

    //verificar los datos
    console.log("Número de Nodos: " + data.nodes.length)
    console.log(data.nodes)
    console.log("Número de Links: " + data.edges.length)
    console.log(data.edges)

    //svg en donde dibujar
    var svg = d3.selectAll("body")
        .append("svg")
        .attr('width', w)
        .attr('height', h)
    ;

    //circulo invisible para dibujar los nodos
    // it's actually two arcs so we can use the getPointAtLength() and getTotalLength() methods
    var dim = w/2;

    var circle = svg.append("circle")
        .attr('cx', w/2)
        .attr('cy', h/2)
        .attr('r', gCircleRadius)
        .style("fill", "#ffffff");

    //crea las lineas con un svg y los datos de "edges"
    var lineas = svg.append('g')
        .attr('class', "links")
        .selectAll("line")
        .data(data.edges)
        .enter()
            .append("path")
            .attr("class", function(d) {
                return "link " + d.tipo; 
            });

    //crea los nodos de acuerdo a los nombres
    var nodos = svg.append("g")
        .attr('class', "nodes")
        .selectAll("circle")
        .data(data.nodes)
        .enter()
            .append("circle")
            .attr('class', function (d) { return "nodos" + (d.categoria ? " " + d.categoria: ""); })
            .on("mouseover", mouseEncima)
            .on("mouseout", mouseAfuera)
            .attr('r', gSmallCircleRadius);

    nodos
        .filter(function(d){
            return d.categoria == "gobierno"
                || d.categoria == "patrimonio"
                || d.categoria == "planeacion"
                || d.categoria == "ong"
                || d.categoria == "gremios"
                || d.categoria == "academia" 
                || d.categoria == "comunidad"
                || d.categoria == "privado"
                || d.categoria == "medios"
                || d.categoria == "otros"
            ;
        })
        .style("opacity", 1)
    ;

    //titulos de los nodos
    nodos.append("title")
        .text(function(d) { return d.id; });

    var text = svg.append("g")
        .attr('class', "text")
        .selectAll("text")
        .data(data.nodes)
        .enter()
        .append("text")
        .text(function(d) { return d.id; });

    //define los nodos y los links de la simulacion
    fuerza.nodes(data.nodes);
    fuerza.force("link").links(data.edges);

    // calcula los espacios de los circulos en el circulo
    var circleCoord = function(node, index, num_nodes){
        var circumference = circle.node().getTotalLength();
        var pointAtLength = function(l){
            return circle.node().getPointAtLength(l)};
        var sectionLength = (circumference)/num_nodes;
        var position = sectionLength*(index+0.5);
        return pointAtLength(circumference-position)
    };

    // define la posicion de los nodos segun el calculo anterior
    data.nodes.forEach(function(d, i) {
        var coord = circleCoord(d, i, data.nodes.length)
        d.fx = coord.x
        d.fy = coord.y
    });

    var radiusScale = (gCircleRadius+1.5*gSmallCircleRadius) / gCircleRadius;
    var textPosition = d => {
        var circX = w*0.5, circY = h*0.5;
        var dX = (d.fx - circX)*radiusScale, dY = (d.fy - circY)*radiusScale;
        return { x: circX + dX, y: circY + dY};
    };
    //simulación y actualizacion de la posicion de los nodos en cada "tick"
    fuerza.on("tick", function(){

        lineas.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
            return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
        });

        nodos.attr('cx', function(d) { return d.x = d.fx; })
             .attr('cy', function(d) { return d.y = d.fy; });

        text.each( (d, i, nodes) => {
            var textPos = textPosition(d);
            var angle = Math.atan2(textPos.y-h*0.5, textPos.x-w*0.5)*RAD2DEG;
            d3.select(nodes[i])
            .attr('x', textPos.x)
            .attr('y', textPos.y)
            .attr('dy', (angle>90 || angle<-90) ? "0.3em" : "0.4em")
            .style("text-anchor", (angle>90 || angle<-90) ? "end" : "start")
            .attr("transform", `rotate(${ (angle>90 || angle<-90) ? angle+180 : angle}, ${textPos.x}, ${textPos.y})` );
        });
    });

    //Create an array logging what is connected to what
    var linkedByIndex = {};
        for (i = 0; i < data.nodes.length; i++) {
            linkedByIndex[i + "," + i] = 1;
        };

    data.edges.forEach(function (d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });

    //This function looks up whether a pair are neighbours  
    function neighboring(a, b) {
        return linkedByIndex[a.index + "," + b.index];
    }

    function mouseEncima() {
        //Reduce the opacity of all but the neighbouring nodes
        d = d3.select(this).node().__data__;
        nodos
            .transition()
            .style("opacity", function (o) {
                return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
            })
            .attr('r', function(o){
                return neighboring(d, o) | neighboring(o, d) ? 2*gSmallCircleRadius : gSmallCircleRadius;
            })
        ;  

        lineas
            .transition()
            .style("stroke-opacity", function (o) {
                return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
            })
        ;
    }

    function mouseAfuera() {

        nodos
            .filter(function(d){
                return d.categoria == "gobierno"
                    || d.categoria == "patrimonio"
                    || d.categoria == "planeacion"
                    || d.categoria == "ong"
                    || d.categoria == "gremios"
                    || d.categoria == "academia" 
                    || d.categoria == "comunidad"
                    || d.categoria == "privado"
                    || d.categoria == "medios"
                    || d.categoria == "otros"
                ;
            })
            .transition()
            .style("opacity", 1)
            .attr('r', 5)
        ;

        // y las lineas a 0
        lineas
            .transition()
            .style("stroke-opacity", 0.1)
        ;
    }
});

编辑

看完完整的 fiddle 之后。

更改链接路径的建议。一些路径沿着圆周。以下内容可防止这种情况发生，并确保所有路径都从中心方向开始。

lineas.attr("d", function(d) {
  return `M${d.source.x},${d.source.y}Q${w*0.5},${h*0.5} ${d.target.x},${d.target.y}`;
});

关于javascript - 围绕一个圆的节点标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51529999/

文章推荐： c# - 为 StreamReader 添加进度条监控？

文章推荐： c# - Service Fabric 中的应用程序洞察？

文章推荐： c# - Xamarin 表单按钮 OnClick

文章推荐： c++ - 在 C 中垂直打印字节数组

c# - 围绕 c++/cli 围绕 native c++ 包装 c#/WPF GUI
这是一种复杂的情况。我正在重构(从头开始)c++，它必须用作 CGI 脚本和独立应用程序的核心。遗憾的是，我从大学开始就没有写过C++，对c#/Java比较熟悉。所以我打算将 WPF 用于 GUI。
geometry - 围绕:before element圈
您好，我正在尝试找出与此线程中提出的问题相同的问题 How to use CSS to surround a number with a circle? 但是 - 每次我这样做时，形状都会变成椭圆形，
string - 围绕 Scala 字符串
如果您在单个语句中执行某些操作，例如“abc”+ stringval +“abc”，那么是一个不可变的字符串副本，还是两个(注意 abc 和 123 在编译时是常量) 奖励回合:使用像下面这样的 St
SQL - 围绕 AND 的 IF 语句
我正在尝试创建一个查询，该查询只会在满足某些条件的情况下添加 AND 子句。这就是我所追求的: SELECT DISTINCT id name active FROM team WHER
Gnuplot:围绕 3d 表面绘制边界框
在使用 Google 的出色绘图工具进行了一些试验后，我正在使用 Gnuplot 绘制几个 3D 图形。我喜欢 Google 工具的一件事是它在表面周围绘制的“边界框”，这让我更容易看到大小。有没有
elasticsearch - 围绕 Elasticsearch 或Solr编写包装是个好主意吗
我们最近从solr迁移到 Elasticsearch 。因此决定以自定义查询格式编写一个包装器，该包装器将转换为 Elasticsearch 查询。将来，如果我们更改为另一个数据存储，则只需要修改此
javascript - 围绕 Canvas 圆绘制条形音箱
我有以下内容将音频剪辑的频率绘制为条形音箱: const drawSinewave = function() { requestAnimationFrame(drawSinewave);
javascript - 围绕 Canvas 中的某个点旋转矩形
我试图围绕其父矩形的中心旋转一个矩形。 child 到 parent 边界的距离必须始终保持不变。我几乎成功了，但我的方法似乎有一个小错误。我似乎找不到问题所在。示例: http://jsfiddl
android - 围绕 SharedPreference 对辅助类进行单元测试
我有一个帮助类来将用户对象保存到共享首选项。我用过 serialize(): String函数和 create(serializedString: String)我的 User 中的函数数据模型。他们
ios - 围绕 UIBezierPath 的可见部分绘制路径
是否可以围绕 UIBezierPath 的可见部分绘制路径？这是我的问题的一个例子这是我想要完成的这是我到目前为止得到的: - (void)drawRect:(CGRect)rect { C
java - 围绕 superfirst 工作
这里，AsciiChecker启用文本形式的矩阵规范。 abstract class AsciiChecker extends AlgoritmicChecker { String[] asc
java - 围绕 ResultSet 和基于索引的检索的常量声明的设计考虑
目前，我有十个不同的查询，它们通过 JDBC 处理，并包装在返回 ResultSet 的函数中。这些 ResultSet 对象中的每一个都由外部程序进行迭代，并将通过其索引而不是根据要求的列名进行访问
java - 围绕 finder 方法的事务
围绕 finder 方法启动事务是否明智: @Transactional public E getParticularEvent(final String id) { return (E)em
javascript - 围绕 Canvas 边缘移动的圆圈
我需要一个围绕 Canvas 边缘移动的圆圈。向右然后向下移动可以正常工作，但是当它需要向左移动时，它会跳到右下角并开始一次又一次地向右移动。我不知道如何解决这个问题。 var can = doc
javascript - 围绕 jQuery 插件
我正在尝试我的第一个 jQuery 插件。 (耶……时间到了!) 我很难思考如何让一个可公开访问的函数正常启动。代码 (function($, doc, win){ "use strict"
c++ - 围绕 OpenGL 场景中的对象旋转有困难
在阅读了很多关于绕相机旋转的指南并询问了一些关于 SO 的其他问题后，我想到了 SSCCE我到目前为止所拥有的。也许这样其他人会更容易理解我需要什么，对我来说答案是什么。到目前为止它看起来像这样:
java - 围绕 java 类传递数据
这里是 Java 菜鸟!我正在努力为我正在编写的 Android 应用程序画龙点睛。本质上，它是一个 RSS 阅读器。异步任务获取 RSS 提要。然后对其进行解析，我想做的最后一点是使用已解析的 RS
php - 围绕 SELECT 语句的一个特定结果添加代码
我有以下代码，从数据库的“类(class)”表中选择标题和图像。 setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
android - 围绕 Canvas 上的枢轴旋转位图
我正在尝试实现一个表盘，其中一只手的位图图像围绕 Canvas 上的表盘中心旋转。基本上在 onDraw() 方法中，我希望能够将图像资源放到 Canvas 上，然后每秒旋转一次。我有每秒触发一次
java - 围绕 JXLoginPane 示例理解框架的问题
我从 SwingX 找到了一个名为 JXLoginPane 的组件在 WindowBuilder 中可用，这似乎是我尝试做的事情的一个很好的起点，但我需要有关如何使用它的更多信息。到目前为止，我发现唯

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 围绕一个圆的节点标题