d3 tree 项目实例一

最新推荐文章于 2024-05-15 10:04:16 发布
最新推荐文章于 2024-05-15 10:04:16 发布
阅读量408 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feihongdragon/article/details/42399783
版权

效果图

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d3 tree</title>
    <style type="text/css">
        /* svg style */
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
}

.node text {
    font: 12px sans-serif;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
}

    </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script> 
<script type="text/javascript" src="js/tree.js"></script>   
</body>
</html>

json

{
    "success": true,
    "data": {
        "1": {
            "id": "1",
            "parent": "0",
            "title": "根节点",
            "url": "NULL",
            "status": "0",
            "shape": "root",
            "product_id": "0",
            "checkIfTrendAvailable": true,
            "checkIfHeatAvailable": false
        },
        "2": {
            "id": "2",
            "parent": "1",
            "title": "一级节点1",
            "url": "NULL",
            "status": "1",
            "shape": "suqare",
            "product_id": "300000001",
            "checkIfTrendAvailable": false,
            "checkIfHeatAvailable": false
        },
        "3": {
            "id": "3",
            "parent": "2",
            "title": "三级节点1",
            "url": "NULL",
            "status": "1",
            "shape": "square",
            "product_id": "0",
            "checkIfTrendAvailable": false,
            "checkIfHeatAvailable": false
        },
        "4": {
            "id": "4",
            "parent": "2",
            "title": "三级节点2",
            "url": "NULL",
            "status": "1",
            "shape": "square",
            "product_id": "0",
            "checkIfTrendAvailable": false,
            "checkIfHeatAvailable": false
        },
        "5": {
            "id": "5",
            "parent": "14",
            "title": "子节点1",
            "url": "NULL",
            "status": 1,
            "shape": "round",
            "product_id": "0",
            "checkIfTrendAvailable": true,
            "checkIfHeatAvailable": false
        },
        "6": {
            "id": "6",
            "parent": "14",
            "title": "子节点2",
            "url": "NULL",
            "status": 0,
            "shape": "round",
            "product_id": "0",
            "checkIfTrendAvailable": true,
            "checkIfHeatAvailable": false
        },
        "7": {
            "id": "7",
            "parent": "14",
            "title": "子节点3",
            "url": "NULL",
            "status": 0,
            "shape": "round",
            "product_id": "0",
            "checkIfTrendAvailable": true,
            "checkIfHeatAvailable": false
        },
        "8": {
            "id": "8",
            "parent": "14",
            "title": "子节点4",
            "url": "NULL",
            "status": 0,
            "shape": "round",
            "product_id": "0",
            "checkIfTrendAvailable": true,
            "checkIfHeatAvailable": false
        },
        "9": {
            "id": "9",
            "parent": "14",
            "title": "子节点5",
            "url": "NULL",
            "status": 0,
            "shape": "round",
            "product_id": "0",
            "checkIfTrendAvailable": true,
            "checkIfHeatAvailable": false
        },
        "10": {
            "id": "10",
            "parent": "14",
            "title": "子节点6",
            "
最低0.47元/天 解锁文章
feihongdragon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3树图数据结构例子
01-12
D3树图数据结构例子，用于理解treemap layout
D3 Tree
weixin_39967005的博客
04-13 827
D3生成树
d3+jQuery横向树图demo.zip
04-28
d3+jQuery横向树图demo.zip
d3树形图，类思维导图
01-15
用d3做的一个类思维导图的树形图，可以使用IE浏览器打开。支持树节点的打开和收回
D3.js--Tree(树)
风火一回，一生不毁
12-30 1万+
html： CSS： .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } JS： //定义
FamilyTree:使用 d3.js 和 Meteor 进行家谱可视化
06-21
本项目“FamilyTree”就是这样的一个实例，它利用了JavaScript库d3.js和全栈开发框架Meteor来实现家谱的可视化。下面将详细探讨这两个技术以及它们在创建家谱可视化中的应用。 首先，d3.js（Data-Driven Documents...
d3js呈现中国城市名称数据树
11-18
以上就是关于“d3js呈现中国城市名称数据树”的相关知识点，这个项目涉及到了D3.js的树图绘制、事件处理以及数据模拟请求，是学习D3.js数据可视化的典型实例。通过实践这个项目，开发者可以深入理解D3.js的底层机制...
d3写的可伸缩收起的树结构代码
04-03
在我们的代码中，`d3.tree()`函数被用来创建一个树布局实例，它会根据给定的尺寸和数据自动计算每个节点的位置。 2. **数据绑定（Data Binding）** 在D3中，数据绑定是将数据数组与DOM元素关联的关键步骤。通过`d3...
D3可视化史上最全中文文档
11-22
1. 数据绑定：D3.js的核心特性之一是将数据与DOM元素进行绑定，使得数据的变化能够自动反映到界面上。通过`d3.select()`和`d3.selectAll()`选择元素，然后用`data()`方法绑定数据。 2. 数据转换：D3.js提供了丰富的...
d3.js关系图谱示例
04-28
**标题解析：** "d3.js关系图谱示例" 指的是使用d3.js这个JavaScript库创建的关系网络图表的实例。d3.js（Data-Driven Documents）是一个强大的数据可视化库，它允许开发者利用SVG、Canvas或HTML来创建动态且交互式...
d3-tree.zip
07-30
使用vue.js+d3技术完成生成树的实现 # d3-tree ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Run your tests ``` npm run test ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
d3 tree 结构树
上官hao的博客
11-28 719
实现效果如下 <style> .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 1...
推荐开源项目：React D3 Tree - 美观易用的树状图组件
最新发布
gitblog_00050的博客
05-15 582
推荐开源项目：React D3 Tree - 美观易用的树状图组件 项目地址:https://gitcode.com/bkrem/react-d3-tree 在数据可视化的世界里，树状图是一种非常有效的展示层次结构信息的方式。今天，我们要向您推荐一款由React和D3.js精心打造的开源项目——React D3 Tree。这个组件可以帮助您轻松构建交互式、可定制的树形图，适用于各种场景，例如家族树...
d3 tree 实现双向动画树总结
japlus的博客
03-02 1896
使用d3.js 实现双向tree，并实现节点展开收起动画。使用svg 绘制。
关于d3.js绘制的树中g元素的拖动的功能实现
春夏秋冬bin的博客
03-08 3861
本人在做项目的时候，遇到了需要将d3.js绘制出来的树进行拖动的问题。1.先贴创建该树的源码//该树的结构 var treeData = [ { name: "原问题", description: "", _prototype: "_question", children: [] } ]; // ************** Generate the tr...
【D3.js数据可视化系列教程】（二十九）--折叠树
热门推荐
司机大傻
11-05 1万+
折叠树
d3+jQuery横向树图，可展开
weixin_43085797的博客
04-17 2081
效果图 实现： <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="gqct.css"> <title>d3+jQuery横向树图</title&gt...
d3_tree_layout
用法之妙，存乎一心。
04-02 1468
D3太酷
d3.js tree 删除节点
09-08
要删除D3.js树中的节点，可以使用`selection.remove()`方法。该方法用于从DOM中删除选定的元素。...d3.tree。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值