首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在d3.js中创建形状正确的矩形树状图?

在d3.js中创建形状正确的矩形树状图,可以按照以下步骤进行:

  1. 导入d3.js库:在HTML文件中引入d3.js库,可以通过CDN链接或本地文件引入。
  2. 创建SVG容器:使用d3.select选择一个HTML元素作为SVG容器,设置宽度、高度和边距等属性。
  3. 准备数据:准备树状图所需的数据,通常是一个包含层级关系的JSON对象。
  4. 创建树状图布局:使用d3.tree()创建一个树状图布局,并设置节点间的间距、层级间的间距等属性。
  5. 创建节点和连线:使用布局生成的数据,通过d3.hierarchy()创建节点和连线的数据结构。使用d3.linkHorizontal()或d3.linkVertical()创建连线的生成器。
  6. 绘制节点和连线:使用d3.select().append()创建节点和连线的SVG元素,并设置其位置、样式等属性。
  7. 添加交互效果:可以为节点和连线添加鼠标事件,如悬停效果、点击展开/折叠等。

以下是一个示例代码:

代码语言:txt
复制
// 导入d3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>

// 创建SVG容器
const svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600);

// 准备数据
const data = {
  "name": "Root",
  "children": [
    {
      "name": "Node 1",
      "children": [
        {"name": "Leaf 1"},
        {"name": "Leaf 2"}
      ]
    },
    {
      "name": "Node 2",
      "children": [
        {"name": "Leaf 3"},
        {"name": "Leaf 4"}
      ]
    }
  ]
};

// 创建树状图布局
const treeLayout = d3.tree()
  .size([600, 400]);

// 创建节点和连线的数据结构
const root = d3.hierarchy(data);
const links = treeLayout(root).links();
const nodes = root.descendants();

// 创建连线的生成器
const linkGenerator = d3.linkHorizontal()
  .x(d => d.y)
  .y(d => d.x);

// 绘制连线
svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", linkGenerator);

// 绘制节点
const node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", d => `translate(${d.y},${d.x})`);

node.append("rect")
  .attr("width", 80)
  .attr("height", 40)
  .attr("x", -40)
  .attr("y", -20);

node.append("text")
  .text(d => d.data.name)
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle");

// 添加交互效果
node.on("mouseover", function() {
  d3.select(this).select("rect").style("fill", "lightblue");
})
.on("mouseout", function() {
  d3.select(this).select("rect").style("fill", "white");
});

这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于d3.js的更多用法和详细说明,可以参考d3.js官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券