javascript - d3 v4中如何绘制力图？-6ren

javascript - d3 v4中如何绘制力图？

转载作者：行者123 更新时间：2023-11-28 18:14:19

我是 d3 的新手，当我学习如何绘制力图时，我遇到了一些问题。首先，让我们在这里看看我的代码:

<html>
<head>
<meta charset="UTF-8">
<title>the force chart</title>
</head>
 
<body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script> 
        var width = 400;        
        var height = 400;    
        var svg = d3.select("body")    
                    .append("svg")     
                    .attr("width",width)      
                    .attr("height",height);     
        var nodes = [ { "id": "English" },{ "id": "Italy" },
                      { "id": "America" },{ "id": "Canada" },
                      { "id": "Australia" },{ "id": "Japan" },
                      { "id": "China" } ];
        var edges = [ { "source": 0 , "target": 1 } , { "source": 0 , "target": 2 },
                      { "source": 0 , "target": 3 } , { "source": 1 , "target": 4 },
                      { "source": 1 , "target": 5 } , { "source": 1 , "target": 6 }, ];


        var force = d3.forceSimulation(nodes)  
                    .force("link",d3.forceLink()
                    .id(function(d){return d.id})
                    .distance(function(d){return 150}).strength([-400]))
                    .force("charge",d3.forceManyBody())
                    .force("center",d3.forceCenter(width , height));

            force.restart(); //start

        var svg_edges = svg.selectAll("line")
            .data(edges)
            .enter()
            .append("line")
            .style("stroke","#ccc")
            .style("stroke-width",1);

        var color = d3.scaleOrdinal(d3.schemeCategory20);

        //add nodes
        var svg_nodes = svg.selectAll("circle")
            .data(nodes)
            .enter()
            .append("r",20)
            .style("fill",function(d,i){
                return color(i);
            })
            .call(d3.drag());   //to drag the nodes

        //add information
        var svg_texts = svg.selectAll("text")
            .data(nodes)
            .enter()
            .append("text")
            .style("fill", "black")
            .attr("dx", 20)
            .attr("dy", 8)
            .text(function(d){
                return d.id;
            });

        force.on("tick", function(){ //update the position of lines
            svg_edges.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; })

            //update the position of nodes
            svg_nodes.attr("cx",function(d){ return d.x; })
                .attr("cy",function(d){ return d.y; });

            //update the position of information
            svg_texts.attr("x",function(d){ return d.x; })
                .attr("y",function(d){ return d.y; });

        });
    </script>     
</body>
</html>

我想画这样的图:

但是我的代码只能显示一个节点，就像这样:

所以我感到很困惑，因为开发者工具中没有错误。当我布置力时，我推断出 https://github.com/d3/d3-force/blob/master/README.md#links 。所以我解决了由于版本不同而导致的问题。但为什么还是不行呢？你可以帮帮我吗？如果您帮助我，我将非常感激!谢谢!

最佳答案

除了 @Vinod 已经解释过的要点:

.append("circle")

和

.force("center", d3.forceCenter(width/2, height/2));

你有一个尾随逗号。但最重要的是，显示边缘:

首先，将边缘添加到模拟中:

force.force("link")
    .links(edges);

然后，更改链接 ID。目前，没有名为 id 的属性。所以，应该是:

.force("link", d3.forceLink()
    .id(function(d,i) {
        return i
    })
    //the rest of the function

这是一个演示:

 var width = 400;
 var height = 400;
 var svg = d3.select("body")
     .append("svg")
     .attr("width", width)
     .attr("height", height);
 var nodes = [{
     "id": "English"
 }, {
     "id": "Italy"
 }, {
     "id": "America"
 }, {
     "id": "Canada"
 }, {
     "id": "Australia"
 }, {
     "id": "Japan"
 }, {
     "id": "China"
 }];
 var edges = [{
     "source": 0,
     "target": 1
 }, {
     "source": 0,
     "target": 2
 }, {
     "source": 0,
     "target": 3
 }, {
     "source": 1,
     "target": 4
 }, {
     "source": 1,
     "target": 5
 }, {
     "source": 1,
     "target": 6
 }];


 var force = d3.forceSimulation()
     .force("link", d3.forceLink()
         .id(function(d,i) {
             return i
         })
         .distance(function(d) {
             return 150
         }))
     .force("charge", d3.forceManyBody())
     .force("center", d3.forceCenter(width/2, height/2));

 force.restart(); //start

 var svg_edges = svg.selectAll("line")
     .data(edges)
     .enter()
     .append("line")
     .style("stroke", "#ccc")
     .style("stroke-width", 1);

 var color = d3.scaleOrdinal(d3.schemeCategory20);

 //add nodes
 var svg_nodes = svg.selectAll("circle")
     .data(nodes)
     .enter()
     .append("circle")
		 .attr("r", 20)
     .style("fill", function(d, i) {
         return color(i);
     })
     .call(d3.drag()); //to drag the nodes

 //add information
 var svg_texts = svg.selectAll("text")
     .data(nodes)
     .enter()
     .append("text")
     .style("fill", "black")
     .attr("dx", 20)
     .attr("dy", 8)
     .text(function(d) {
         return d.id;
     });
		 
	force.nodes(nodes);
	force.force("link")
      .links(edges);

 force.on("tick", function() { //update the position of lines
     svg_edges.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;
         })

     //update the position of nodes
     svg_nodes.attr("cx", function(d) {
             return d.x;
         })
         .attr("cy", function(d) {
             return d.y;
         });

     //update the position of information
     svg_texts.attr("x", function(d) {
             return d.x;
         })
         .attr("y", function(d) {
             return d.y;
         });

 });

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

关于javascript - d3 v4中如何绘制力图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41013924/

文章推荐： ios - NSUserDefaults standardUserDefaults 未清除的问题

文章推荐： Python 套接字 : Send/receive multiple message

文章推荐： python - Q 学习应用于两人游戏

文章推荐： python - 不同日期的 pandas groupby 事件

javascript - d3.js 力图
这个问题在这里已经有了答案: Does Force-Directed Layout of d3-js support image as node? (1 个回答) 关闭 9 年前。我正在开发一个
javascript - D3 力图 - 固定不重叠的节点
我正在寻求开发一个由节点链接图组成的可视化。我有一系列点，我不想更改其位置，除非图表上发生碰撞(一个节点与另一个节点)。如果节点发生碰撞，我想将它们隔开，这样它们就不会重叠。我的JS代码如下 var
javascript - 3djs，力图。如何保留缩放级别
我正在尝试将缩放和比例级别保存到数据库。我取得了进步，但有一些问题需要解决。事情就是这样。在我的力图初始渲染中，我的缩放级别是准确的。换句话说，这就是我所做的: svg.append("defs"
javascript - 使用节点名称作为链接的 d3 力图
我已经在这几天了，我已经看到了 stackoverflow 和其他地方的问题，但我遗漏了一些东西。假设我们有以下 JSON: { "nodes":[ {"name":"node1"},
javascript - 停止与 d3 中的文本属性重叠的线条 - 力图？
我有以下 svg，它在一个较大的圆圈中间有文本，并用一条线连接到另外两个较小的圆圈。线坐标由以下公式得到: x1={Math.max(radius, Math.min(height
javascript - 如何使用新数据顺利更新 D3 v4 力图
我正在寻找一种方法，将新节点引入到来自全新数据(例如来自数据流)的力导向有向图中。在 mbostock 的示例中(this 或 this)，节点能够顺利进入和退出，因为在初始设置中，每个节点都被渲染
javascript - D3.js - 力图。如何添加缩放和平移
SO上有类似的问题，但我根本不知道如何在我的情况下使用它。我正在尝试向力图添加缩放/平移功能。我对 D3.js 的了解很基础，请原谅我的愚蠢问题。这是原来的fiddle从这里website . 还有
javascript - 以图像为节点的 D3 v4 力图
在力导向图中使用图像作为节点时遇到问题。到目前为止我看到的所有内容似乎都是 v3 代码，而且到目前为止我根本无法获取任何图像，无论是使用 xlink:href 还是 svg:image 或两者都使用。
javascript - 带 div 和 d3 缩放的 d3 力图
Stackoverflow 社区您好!我在 d3force 定向图中无法使用 d3 Zoom。我可以实现它的缩放和平移，但这样做会破坏节点和链接之间的对齐，我不知道如何修复它......我创建了一个

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3 v4中如何绘制力图？