d3.js 自适应(缩放)，力导图，关系图，显示文字，修改线的颜色等问题

最新推荐文章于 2024-03-19 21:50:30 发布

Shimeng_1989

最新推荐文章于 2024-03-19 21:50:30 发布

阅读量5.2k

点赞数

本文链接：https://blog.csdn.net/Shimeng_1989/article/details/100017492

版权

本文介绍了如何使用d3.js创建自适应的力导向图，探讨了在窗口缩放时自动调整图形大小的技术，并详细讲解了如何在关系图中显示文字以及修改连线颜色的方法。

摘要由CSDN通过智能技术生成

含有窗口缩放时自适应自动缩放

//如果动态请求数据并更新，可以先粗暴的吧整个SVG节点以及内部节点全部移除掉，然后在重新绘制
//如果不移除掉，直接更新数据调用update，无效果，数据无法更新

// remove svg节点
d3.select('svg').remove(); //删除整个SVG
d3.select('#spread')
  .selectAll('*')
  .remove(); //清空SVG中的内容

// recharts （重）绘图 ——（如果绘制完毕后，无需切换数据，则不需要上面的remove节点步骤）
var width = 380,
    height = 280,//设置绘制范围的宽高
    root;//定义数据，如果用vue，可以直接用this.XXX(数据传入，无需定义）
var force = d3.layout.force()
              .size([width, height])
              .on("tick", tick);
var svg = d3.select("#spread").append("svg")
        // 如果需要窗口缩放时，自动缩放，绘制SVG时候代码改为如下：
          .attr("preserveAspectRatio", "xMidYMid meet")
          .attr("viewBox", "0 0 380 280");//从左到右依次为：x坐标点起始位置，y坐标点起始位置，视图宽度，视图高度