javascript - 可折叠力导向图上的 D3.js 标题-6ren

javascript - 可折叠力导向图上的 D3.js 标题

转载作者：塔克拉玛干更新时间：2023-11-02 20:46:02

26

4

所以我一直在研究基于以下 example 的可折叠力导向图.

我正在尝试从中推进并为每个节点添加标题。我关注了类似的 answer在 stackoverflow 上，但我无法将该答案的解决方案实现到上面的示例和其他类似解决方案中。

请有人能指出我正确的方向。

实现前请参阅下面的项目代码。

enter image description here

JS

var w = 600,
    h = 600,
    radius = 10,
    node,
    link,
    root;

var force = d3.layout.force()
    .on("tick", tick)
    .charge(function(d) { return -500; })
    .linkDistance(function(d) { return d.target._children ? 100 : 50; })
    .size([w, h - 160]);

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

root = words[0]; //set root node
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();

function update() {
    var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force
        .nodes(nodes)
        .links(links)
        .start();

    // Update the links…
    link = svg.selectAll(".link")
        .data(links);

    // Enter any new links.
    link.enter().insert("svg:line", ".node")
        .attr("class", "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; });

    // Exit any old links.
    link.exit().remove();

    // Update the nodes…
    node = svg.selectAll("circle.node")
        .data(nodes)
        .style("fill", color);

    node.transition()
        .attr("r", radius);

    node.append("title")
        .text(function(d) { return d.name; });

    // Enter any new nodes.
    node.enter().append("svg:circle")
        .attr("class", "node")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", radius)
        .style("fill", color)
        .on("click", click)
        .call(force.drag);

    // Exit any old nodes.
    node.exit().remove();
}

function tick() {
    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; });

    node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
}

// Color leaf nodes orange, and packages white or blue.
function color(d) {
    if(d._children){
        return "#95a5a6";
    }else{
        switch(d.group) {
            case 'r': //adverb
                return "#e74c3c";
                break;
            case 'n': //noun
                return "#3498db";
                break;
            case 'v': //verb
                return "#2ecc71";
                break;
            case 's': //adjective
                return "#e78229";
                break;
            default:
                return "#9b59b6";
        }
    }
}

// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
    var nodes = [], i = 0;

    function recurse(node) {
        if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
        if (!node.id) node.id = ++i;
        nodes.push(node);
        return node.size;
    }

    root.size = recurse(root);
    return nodes;
}

CSS

circle.node {
    cursor: pointer;
    stroke: #34495e;
    stroke-width: 2px;
    box-sizing: border-box;
    stroke-location: inside;
}

line.link {
    fill: none;
    stroke: #34495e;
    stroke-width: 1.5px;
}

HTML

<!DOCTYPE html>
<body>
<script src="http://d3js.org/d3.v2.min.js?2.9.6"></script>
    <script>

        var words = [
    {
        "group":"n",
        "word":"main node",
        "children":[
            {
                "group":"n",
                "name":"sub node 1"
            },
            {
                "group":"n",
                "name":"sub node 2"
            },
            {
                "group":"n",
                "name":"sub node 3"
            },
            {
                "group":"v",
                "name":"sub node 4"
            },
            {
                "group":"s",
                "name":"sub node 5"
            },
            {
                "group":"s",
                "name":"sub node 6"
            },
            {
                "group":"s",
                "name":"sub node 7"
            },
            {
                "group":"s",
                "name":"sub node 8"
            },
            {
                "group":"s",
                "name":"sub node 9"
            },
            {
                "group":"s",
                "name":"sub node 10"
            },
            {
                "group":"s",
                "name":"sub node 11"
            },
            {
                "group":"r",
                "name":"sub node 12",
                "children":[
                    {
                        "group":"r",
                        "name":"sub sub node 1"
                    },
                    {
                        "group":"r",
                        "name":"sub sub node 2"
                    },
                    {
                        "group":"r",
                        "name":"sub sub node 3"
                    }
                ]
            }
        ]
    }
]
    </script>
</body>

JSFiddle

最佳答案

像这样给节点添加标题。

title = svg.selectAll("text.title")    
     .data(nodes);

title.enter()
    .append("text") //In your code you used title instead of text
    .attr("class", "title")
    .text(function(d) { return d.name; });

title.exit().remove();

请注意，标题应附加在圆节点之后。否则标题可能会被 chop 。

同时在 tick 函数中更新标题的位置。

 title.attr("transform", function(d){ return "translate("+d.x+","+d.y+")"; });

这是 jsfiddle

关于javascript - 可折叠力导向图上的 D3.js 标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26747638/

26

4

0

文章推荐： android - Crashlytics 测试版 - 包似乎已损坏

文章推荐： android - 将 View 底部与文本基线对齐

文章推荐： Android WebView Wrapper(应用内浏览器)行为

jQuery 可折叠
我正在尝试创建一个无序列表，其中每个包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
Java 可折叠 if 语句
我使用 PMD检查我的代码。在大多数情况下，它给了我非常有用的提示，但我无法弄清楚在以下情况下可以改进什么。原始代码如下所示: if ((getSomething() != null && getS
javascript - 可折叠/可展开的表格行为
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
javascript - 可折叠 Accordion
我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
javascript - 可折叠，具有内容相关的展开大小
我使用 CSS 和 JS 编写了一个可折叠按钮，我想将一个按钮嵌套在另一个按钮中。是否可以动态调整第一个/外部按钮的高度，以便在打开第二个/内部按钮时，第一个按钮的高度增加第二个按钮的高度？这是我
jQuery 可折叠 UL
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。然而，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我只能打开一个一次。
Flutter 可折叠/可扩展卡片
我正在尝试匹配这个设计点击卡片应该展开我不能用卡片包裹扩展 block ，因为扩展 block 基本上只有一行，我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多，但找不到我
Javascript 可折叠 div 不起作用？
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜，我想打开它，但只能在单击时打开。 test fu
css - Materialise CSS - 可折叠
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。出于某种原因，当
php - 如何使递归 TreeView 可折叠
我有一个递归 TreeView ，它从数据库中提取所有信息，并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript，但都没有任何效果。不确定是我的错误还是其他原因。这是我的基本
java - Sonar 可折叠 if 语句
我收到异常“可折叠 if 语句”。通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
javascript - Angular 可折叠 Accordion
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此，如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
reactjs - Ant Design - 使菜单可折叠/可折叠
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开？
twitter-bootstrap - 可折叠 Bootstrap ，显示第一个元素
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究，但徒劳无功 Aller au dossier personnel
haskell - 可折叠、Monoid 和 Monad
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似，只是交换了参数:
Django admin - 如何使 "inlines"可折叠？
使用“fieldsets”，您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情？谢谢! 最佳答案在 Django 1.10+ 中: class MyModelInl
javascript - YUI dataTable 行可展开/可折叠
有人已经用 YUI dataTable 制作了如下示例的脚本吗？示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
python - wxpython 可折叠 Pane 大小响应不一致
好吧，有些事情很奇怪，我无法弄清楚。假设我有一些类别，每个类别都有一些项目，全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
c# - Xamarin Forms 可折叠 StackLayout
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，
android - 可折叠 View 不适用于 viewpager
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。我想在用户滚动布局时折叠顶部水平回收器 View

首页

博学

6Ren·AI

商城

javascript - 可折叠力导向图上的 D3.js 标题