关于d3js生成节点画布的个人笔记

已于 2024-05-31 08:18:35 修改
阅读量476 收藏 7
点赞数 5
文章标签： 笔记 前端 javascript
于 2024-05-30 21:07:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45354906/article/details/139334611
版权

实现功能

  1. 根据鼠标位置生成节点
  2. 根据节点位置通过鼠标拖拽生成连线
  3. 实现自定义线段颜色功能
  4. 删除节点以及连线功能
  5. 实现单个节点拖动功能
  6. 实现整条线路的拖动功能
    界面如下：

主要模块介绍

绘制连线

const line = svg.selectAll(".line")
    .data(links, d => `${d.source}-${d.target}`);
line.enter()
    .append("line")
    .attr("class", "line")
    .attr("stroke", d => d.color)
    .attr("id", d => d.objId)
    .merge(line)
    .attr("x1", d => nodes.find(n => n.id === d.source).x)
    .attr("y1", d => nodes.find(n => n.id === d.source).y)
    .attr("x2", d => nodes.find(n => n.id === d.target).x)
    .attr("y2", d => nodes.find(n => n.id === d.target).y)
    });
line.exit().remove();

绘制节点

设置为四种节点类型，初始节点，杆塔，开关，电表箱

const node = svg.selectAll(".node")
    .data(nodes, d => d.id);
node.enter()
	// 这里可以换成circle，加入属性r，10换成原型节点，移除xlink
    .append("image")
    .attr("class", d => `node ${d.type}`)
    .attr("width", iconSize)
    .attr("height", iconSize)
    .attr("xlink:href", d => {
        if (d.type === 'pole') return './pole.png';
        if (d.type === 'meterBox') return './meterBox.png';
        if (d.type === 'switch') return './switch.png';
        if (d.type === 'init') return './init.png';
    })
    .merge(node)
    .attr("x", d => d.x - iconSize / 2)
    .attr("y", d => d.y - iconSize / 2)
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
    )
    .on("click", function(event, d) {
        if (isDeletingNode) {
            links = links.filter(link => link.source !== d.id && link.target !== d.id);
            nodes = nodes.filter(node => node !== d);
            update();
            // isDeletingNode = false;
        }else{
            console.log("点击了节点", d.name);
        }
    });
node.exit().remove();

添加节点

svg.on("click", function(event) {
    if (isAddingNode) {
        const coords = d3.pointer(event);
        const id = getUuid();
        const name = `Node${nodes.length + 1}`;
        const type = nodeType;
        nodes.push({ id, name, type, x: coords[0], y: coords[1] });
        update();
    }
});

完整实现如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Line Loss Diagram with D3.js</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>    
    <style>
        .pole {
            fill: orange;
            stroke: black;
            stroke-width: 1px;
        }
        .meterBox {
            fill: green;
            stroke: black;
            stroke-width: 1px;
        }
        .gateway {
            fill: blue;
            stroke: black;
            stroke-width: 1px;
        }
        .switch {
            fill: gray;
            stroke: black;
            stroke-width: 1px;
        }
        .line {
            stroke-width: 2px;
        }
        .label {
            font-size: 12px;
            text-anchor: middle;
        }
        .button-container {
            margin-bottom: 10px;
        }
        button {
            margin-right: 10px;
        }
        #colorPicker {
            display: none;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <button id="addNodeButton" onclick="addNodeButton('pole')">新增节点</button>
        <button id="addNodeButton" onclick="addNodeButton('meterBox')">新增表箱</button>
        <button id="addNodeButton" onclick="addNodeButton('switch')">新增开关</button>
        <button id="addLinkButton">连线</button>
        <button id="deleteNodeButton">删除节点</button>
        <button id="deleteLinkButton">删除连线</button>
        <button onclick="logNodeButton()">打印节点</button>
        <button onclick="selectButton()">选择节点</button>
        <button onclick="selectAllButton()">整体拖动</button>
        <input type="color" id="colorPicker">
        <button
            onclick="updateColor()"
        >
            更新颜色
        </button>
    </div>
    </div>
    <svg width="800" height="600">
        <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="gray" stroke-width="0.5"/>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
    </svg>
    <script src="test.js"></script>
    <script>
        const svg = d3.select("svg");
        // 节点以及连线的拖动行为
        const dragNode = d3.drag()
            .on("start", dragNodeStarted)
            .on("drag", draggedNode)
            .on("end", dragNodeEnded);
  
        function dragNodeStarted(event, d) {
            d3.select(this).raise().classed("active", true);
        }
  
        function draggedNode(event, d) {
            d.x = event.x;
            d.y = event.y;
  
            d3.select(this)
                .attr("cx", d.x)
                .attr("cy", d.y);
  
            // 更新连线的位置
            svg.selectAll(".line")
                .attr("x1", l => nodes.find(n => n.id === l.source).x)
                .attr("y1", l => nodes.find(n => n.id === l.source).y)
                .attr("x2", l => nodes.find(n => n.id === l.target).x)
                .attr("y2", l => nodes.find(n => n.id === l.target).y);
        }
  
        function dragNodeEnded(event, d) {
            d3.select(this).classed("active", false);
        }
        // let nodes = [];
        // let links = [];
        let links = [];
        let nodes = [{
            "id": "ec61a8f4-73ec-46fe-adb2-4473119a006c",
            "name": "init",
            "type": "init",
            "x": 119.99999237060547,
            "y": 43.71427917480469
        }];
  
        // 虚拟数据

//        nodes = jsonData.nodes;
//      links = jsonData.links;

  

        let isAddingNode = false;
        let isAddingLink = false;
        let isDeletingNode = false;
        let isDeletingLink = false;
        let sourceNode = null;
        let dragLine = null;
        let nodeType = null;
        let selectedLink   = null;
        let allDrag = false;
        const iconSize = 20;

  

        // 绘制节点和连线
        function update() {
            // 绘制连线
            const line = svg.selectAll(".line")
                .data(links, d => `${d.source}-${d.target}`);
            line.enter()
                .append("line")
                .attr("class", "line")
                .attr("stroke", d => d.color)
                .attr("id", d => d.objId)
                .merge(line)
                .attr("x1", d => nodes.find(n => n.id === d.source).x)
                .attr("y1", d => nodes.find(n => n.id === d.source).y)
                .attr("x2", d => nodes.find(n => n.id === d.target).x)
                .attr("y2", d => nodes.find(n => n.id === d.target).y)
                .on("click", function(event, d) {
                    if (isDeletingLink) {
                        links = links.filter(link => link !== d);
                        update();
                        // isDeletingLink = false;
                    } else{
                        selectedLink = d;
                        const colorPicker = document.getElementById("colorPicker");
                        colorPicker.style.display = "block";
                        colorPicker.style.left = `${event.pageX}px`;
                        colorPicker.style.top = `${event.pageY}px`;
                        colorPicker.value = d.color || "#000000";
                        colorPicker.focus();
                    }
                });

            line.exit().remove();

            // 绘制节点
            const node = svg.selectAll(".node")
                .data(nodes, d => d.id);
            node.enter()
                .append("image")
                .attr("class", d => `node ${d.type}`)
                .attr("width", iconSize)
                .attr("height", iconSize)
                .attr("xlink:href", d => {
                    if (d.type === 'pole') return './pole.png';
                    if (d.type === 'meterBox') return './meterBox.png';
                    if (d.type === 'switch') return './switch.png';
                    if (d.type === 'init') return './init.png';
                })
                .merge(node)
                .attr("x", d => d.x - iconSize / 2)
                .attr("y", d => d.y - iconSize / 2)
                .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended)
                )
                .on("click", function(event, d) {
                    if (isDeletingNode) {
                        links = links.filter(link => link.source !== d.id && link.target !== d.id);
                        nodes = nodes.filter(node => node !== d);
                        update();
                        // isDeletingNode = false;
                    }else{
                        console.log("点击了节点", d.name);
                    }
                });
            node.exit().remove();

            // 添加标签
            const label = svg.selectAll(".label")
                .data(nodes, d => d.id);
            label.enter()
                .append("text")
                .attr("class", "label")
                .merge(label)
                .attr("x", d => d.x)
                .attr("y", d => d.y - iconSize/2 - 5)
                // .text(d => d.name);
                // .text(d => d.type);
            label.exit().remove();
        }

  

        // 添加新节点

        svg.on("click", function(event) {
            if (isAddingNode) {
                const coords = d3.pointer(event);
                const id = getUuid();
                const name = `Node${nodes.length + 1}`;
                // const type = nodes.length % 3 === 0 ? 'tower' : (nodes.length % 3 === 1 ? 'station' : 'gateway');
                const type = nodeType;
                nodes.push({ id, name, type, x: coords[0], y: coords[1] });
                update();
                // isAddingNode = false; // Reset the flag
            }
        });

        function dragstarted(event, d) {
            if (isAddingLink) {
                sourceNode = d;
                let id = getUuid();
                sourceNode.objId = id;
                dragLine = svg.append("line")
                    .attr("class", "dragLine")
                    .attr("stroke", "gray")
                    .attr("stroke-width", 2)
                    .attr("x1", d.x)
                    .attr("y1", d.y)
                    .attr("x2", d.x)
                    .attr("y2", d.y)
                    .attr("id", id);
            }
            if (!isAddingNode && !isAddingLink && !isDeletingNode && !isDeletingLink) {
                d3.select(this).raise().classed("active", true);
            }
        }

  

        function dragged(event, d) {
            if (dragLine) {
                dragLine.attr("x2", event.x)
                        .attr("y2", event.y);
            }
            if (!isAddingNode && !isAddingLink && !isDeletingNode && !isDeletingLink) {
                d.x = event.x;
                d.y = event.y;

                d3.select(this)
                    .attr("x", d.x - iconSize / 2)
                    .attr("y", d.y - iconSize / 2);

                // 更新连线的位置
                svg.selectAll(".line")
                    .attr("x1", l => nodes.find(n => n.id === l.source).x)
                    .attr("y1", l => nodes.find(n => n.id === l.source).y)
                    .attr("x2", l => nodes.find(n => n.id === l.target).x)
                    .attr("y2", l => nodes.find(n => n.id === l.target).y);
            }
            if (allDrag) {
                const dx = event.dx;
                const dy = event.dy;

                // 更新被拖动节点的位置
                d.x += dx;
                d.y += dy;

                d3.select(this)
                    .attr("x", d.x - iconSize / 2)
                    .attr("y", d.y - iconSize / 2);

                // 递归更新与当前节点相连的所有节点和连线的位置
                const visitedNodes = new Set();
                updateConnectedNodes(d, dx, dy, visitedNodes);

                // 更新所有连线的位置
                svg.selectAll(".line")
                    .attr("x1", l => nodes.find(n => n.id === l.source).x)
                    .attr("y1", l => nodes.find(n => n.id === l.source).y)
                    .attr("x2", l => nodes.find(n => n.id === l.target).x)
                    .attr("y2", l => nodes.find(n => n.id === l.target).y);

                // 更新所有节点的位置
                svg.selectAll(".node")
                    .attr("x", n => n.x - iconSize / 2)
                    .attr("y", n => n.y - iconSize / 2);
            }
        }
  
        function dragended(event, d) {
            if (dragLine) {
                dragLine.remove();
                dragLine = null;
                const targetNode = nodes.find(n => Math.hypot(n.x - event.x, n.y - event.y) < 10);
                if (targetNode && targetNode !== sourceNode) {
                    const color = determineLinkColor(sourceNode, targetNode);
                    links.push({objId:sourceNode.id, source: sourceNode.id, target: targetNode.id, color: color });
                    update();
                }
                sourceNode = null;
                // isAddingLink = false; // Reset the flag
            }
            if (!isAddingNode && !isAddingLink && !isDeletingNode && !isDeletingLink) {
                d3.select(this).classed("active", false);
            }
        }
  
        /**
         * 递归更新与当前节点相连的所有节点的位置
         * @param {object} node - 当前节点
         * @param {number} dx - x方向的移动距离
         * @param {number} dy - y方向的移动距离
         * @param {Set} visitedNodes - 已访问的节点集合
         */
        function updateConnectedNodes(node, dx, dy, visitedNodes) {
            visitedNodes.add(node.id);
  
            links.forEach(link => {
                if (link.source === node.id && !visitedNodes.has(link.target)) {
                    const targetNode = nodes.find(n => n.id === link.target);
                    targetNode.x += dx;
                    targetNode.y += dy;
                    updateConnectedNodes(targetNode, dx, dy, visitedNodes);
                } else if (link.target === node.id && !visitedNodes.has(link.source)) {
                    const sourceNode = nodes.find(n => n.id === link.source);
                    sourceNode.x += dx;
                    sourceNode.y += dy;
                    updateConnectedNodes(sourceNode, dx, dy, visitedNodes);
                }
            });
        }
  
        function determineLinkColor(sourceNode, targetNode) {
            if (sourceNode.type === 'pole' && targetNode.type === 'pole') {
                return '#1e90ff';
            } else if (sourceNode.type === 'station' && targetNode.type === 'station') {
                return 'green';
            } else if (sourceNode.type === 'gateway' && targetNode.type === 'gateway') {
                return 'blue';
            } else {
                return '#7f8c8d';
            }
        }
        // 按钮事件处理
        function addNodeButton(type) {
            nodeType = type;
            isAddingNode = true;
            isAddingLink = false;
            isDeletingNode = false;
            isDeletingLink = false;
            allDrag = false;
        };
  
        d3.select("#addLinkButton").on("click", function() {
            isAddingLink = true;
            isAddingNode = false;
            isDeletingNode = false;
            isDeletingLink = false;
            allDrag = false;
        });

        d3.select("#deleteNodeButton").on("click", function() {
            isDeletingNode = true;
            isAddingNode = false;
            isAddingLink = false;
            isDeletingLink = false;
            allDrag = false;
        });
  
        d3.select("#deleteLinkButton").on("click", function() {
            isDeletingLink = true;
            isAddingNode = false;
            isAddingLink = false;
            isDeletingNode = false;
            allDrag = false;
        });
        // 整体拖动
        function selectAllButton() {
            isDeletingLink = false;
            isAddingNode = false;
            isAddingLink = false;
            isDeletingNode = false;
            allDrag = true;
        }
  
        update();
        function logNodeButton() {
            console.log("Node type:", nodeType);
            console.log("Adding node:", isAddingNode);
            console.log("Adding link:", isAddingLink);
            console.log("Deleting node:", isDeletingNode);
            console.log("Deleting link:", isDeletingLink);
            console.log("Nodes:", nodes);
            console.log("Links:", links);
        }
        function getUuid () {
            if (typeof crypto === 'object') {
              if (typeof crypto.randomUUID === 'function') {
                return crypto.randomUUID();
              }
              if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') {
                const callback = (c) => {
                  const num = Number(c);
                  return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16);
                };
                return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, callback);
              }
            }
            let timestamp = new Date().getTime();
            let perforNow = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0;
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
              let random = Math.random() * 16;
              if (timestamp > 0) {
                random = (timestamp + random) % 16 | 0;
                timestamp = Math.floor(timestamp / 16);
              } else {
                random = (perforNow + random) % 16 | 0;
                perforNow = Math.floor(perforNow / 16);
              }
              return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16);
            });
        };
        function selectButton() {
            isDeletingLink = false;
            isAddingNode = false;
            isAddingLink = false;
            isDeletingNode = false;
            allDrag = false;
        }
        /**
         * 更新指定线段的stroke属性
         * @param {string} sourceId - 连线起点节点的ID
         * @param {string} targetId - 连线终点节点的ID
         * @param {string} color - 新的颜色值
         */
         function updateLinkStroke(sourceId, targetId, color) {
            // 查找指定起点和终点的连线
            const link = links.find(l => l.source === sourceId && l.target === targetId);
            if (link) {
                // 更新连线的颜色属性
                link.color = color;
                // 使用D3.js选择器选择指定的连线，并更新其stroke属性
                d3.selectAll(".line")
                    .filter(d => d.source === sourceId && d.target === targetId)
                    .attr("stroke", color);
            }
        }

         // 颜色选择器事件处理
        function updateColor() {
            const colorPicker = document.getElementById("colorPicker");
            selectedLink.color = colorPicker.value;
            updateLinkStroke(selectedLink.source, selectedLink.target, selectedLink.color);
            colorPicker.style.display = 'none';
        }
    </script>
</body>
</html>
鲈鱼不会起名鸭
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
d3-canvas:d3.js 的画布渲染助手
06-12
d3.js 画布 用于渲染到 HTML5 画布的 d3.js 插件。 用法 D3 是关于将数据绑定到元素。 但是，与 SVG 不同的是，canvas 是由 JavaScript API 驱动的，而不是由 DOM 元素驱动的。 d3.canvas.line（和径向） var data = [ [ 0 , 1 ] , [ 1 , 1 ] , [ 2 , 2 ] , [ 3 , 3 ] , [ 4 , 5 ] ] , line ; // the svg way line = d3 . svg . line ( ) ; d3 . select ( 'path' ) . datum ( data ) . attr ( 'd' , line ) ; // using d3.canvas line = d3 . canvas . line ( ) ; d3 . select ( 'canvas' )
【实战篇】38 # 如何使用数据驱动框架 D3.js 绘制常用数据图表？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
01-07 703
【跟月影学可视化】学习笔记。数据驱动框架不要求固定格式的数据格式，而是通过对原始数据的处理和对容器迭代、创建新的子元素，并且根据数据设置属性，来完成从数据到元素结构和属性的映射，然后再用渲染引擎将它最终渲染出来。当需求比较复杂，或者样式要求灵活多变的时候，可以考虑使用数据驱动框架。d3js 文档以及 spritejs 文档 依赖于 DOM 操作，所以 SVG 和 SpriteJS 这种与 DOM API 保持一致的图形系统，使用起来会更加方便一些。下面将使用这个两个库进行demo的演示 实现效果如下：力导向
D3.js学习笔记十五:D3.js树图(Tree)展开和折叠
热门推荐
小飞侠的博客
08-22 1万+
构图(d3.layout)——树图(Tree)的展开和折叠 树的基本操作就是展开和折叠，在D3里面，树的展开和折叠是通过设置树的子节点属性来实现的，tree.nodes(root)返回树的当前节点集合，通过操作这个集合，可以实现节点的动态变化。 children - the array of child nodes, or null for leaf nodes. x - the
d3入门笔记
YoungHD的博客
04-01 377
导入d3库 -导入外部d3库 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 导入本地d3库 <script src="d3.min.js"></script> 标签选择 d3.select()：是选择所有指定元素的第一个 d3.selectAll(...
d3.js插件 拓扑图 动态增加、删除节点
05-08
d3.js是一个强大的JavaScript库，专为创建数据驱动的文档而设计，尤其擅长制作交互式和复杂的可视化图表。本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图，并实现节点的动态增加与删除功能。 拓扑图是一种图形...
利用d3.js实现蜂巢图表带动画效果
10-16
主要给大家介绍了关于如何利用d3.js实现蜂巢图表带动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d3.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
D3.js图表 组织结构
05-02
D3 js 支持画布整体缩放移动 可展开收缩节点，后续可扩展为： * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 * 支持双击...
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
C语言复习（笔记加例题）第一章：数据类型及其运算
weixin_55021541的博客
07-17 1020
通常在其他编程语言中用作字符串的缩写，但在 C 语言中，字符串是通过字符数组char a[]来表示的。：以下哪个类型是 C 语言中用来存储布尔值的？：以下哪个类型是 C 语言中用来存储字符的？：以下哪个不是 C 语言中的基本数据类型？2. C 运算符的种类、运算优先级和结合性。3. 不同类型数据间的转换与运算。4. C 表达式的类型和求值规则。并不是一个基本数据类型。：A，在 C 语言中，
防御笔记第七天（时需更新）
weixin_63264424的博客
07-16 770
HRP在进行双机热备时，还有一个要求，两台热设备之间，必须拥有一条链路，用来同步信息，并且，这条链路必须是三层链路---这两条路在进行数据传输时，不受安全策略的影响，（注意，如果心跳线是直连的，则不受安全策略的影响，但是中间有中继设备，即非直连场景，则需要配置安全策略）----心跳线----VGMP发送的报文也是通过心跳线传输的。配置信息---（接口IP地址，路由地址）-----hrp不能同步基本的接口和路由信息，安全策略和NAT策略……状态信息-----会话表，server-map，黑名单和白名单等等。
node模块加载及第三方包（学习笔记）
oopsboom的博客
07-16 594
gulp是什么？ 基于node平台开发的前端构建工具 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。 能做什么？ 项目上线，HTML、CSS、JS文件压缩合并 语法转换（es6、less …） 公共文件抽离 修改文件浏览器自动刷新 Gulp使用 1.使用npm install gulp下载gulp库文件 2.在项目根目录下建立gulpfile.js文件（只能是这个文件） 3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构
Java并发编程与高并发解决方案笔记
tuku0801的专栏
07-17 1003
将结合大量图示及代码演示，带你掌握多线程并发编程（线程安全，线程调度，线程封闭，同步容器等）与高并发处理思路与手段（扩容，缓存，队列，拆分等），构建完整的并发与高并发知识体系
linux学习笔记整理: 关于linux系统介绍 2024/7/16；
gzx233的博客
07-16 1145
linux基础介绍和指令
AGV栅格地图与QImage图片转换笔记
Pou光明的博客
07-15 311
最近在加班加点处理一个agv相关的任务，印象比较深的是将agv给的json数据转换为一个图片。最终的简化需求是将某坐标系下的二维点数据转换为一张图片的像素。Ok，首先的问题是如何将二维的数据映射到栅格坐标系。先看数据例子："mapType":"2D-Map","maxPos":{"x":4.51,"y":16.331},"minPos":{"x":-14.138,"y":-1.48} "resol...
cs224w笔记（p5）
最新发布
m0_51118873的博客
07-19 418
它特别关注两个节点共有的邻居节点，并给予那些在网络中不太常见的共有邻居更高的权重，而对于那些更常见的共有邻居则给予较低的权重。其中，Γ(𝑢)Γ(u) 表示节点 𝑢u 的邻居节点集合，Γ(𝑣)Γ(v) 表示节点 𝑣v 的邻居节点集合，Γ(𝑢)∩Γ(𝑣)Γ(u)∩Γ(v) 表示 𝑢u 和 𝑣v 的共有邻居节点集合。其中，𝐴A 和 𝐵B 分别代表两个集合，∣𝐴∩𝐵∣∣A∩B∣ 表示集合 𝐴A 与 𝐵B 的交集元素的数量，而 ∣𝐴∪𝐵∣∣A∪B∣ 表示集合 𝐴A 与 𝐵B 的并集元素的数量。
STM32学习和实践笔记（40）：DS18B20温度传感器实验
qq_37191547的博客
07-15 829
DS18B20温度传感器的内部存储器包括一个高速的暂存器RAM和一个非易失性的可电擦除的EEPROM,后者存放高温度和低温度触发器TH、TL和配置寄存器。60~240 us，以产生低电平应答脉冲。单总线器件仅在主机发出读时序时，才向主机传输数据，所以，在主机发出读数据命令后，必须马上产生读时序，以便从机能够传输数据。比如我们要计算+85度，数据输出十六进制是0X0550，因为高字节的高5位为0，表明检测的温度是正温度，接着主机释放总线，外部的上拉电阻将单总线拉高，延时 15～60 us，并进入接收模式。
Cadence23学习笔记（三）
zjb6668的博客
07-15 361
焊接FPC的时候先上锡，焊台加热后再图上焊油，再放置元器件，再加热：万用表测电流只需要把表笔接到电流的孔位即可测量电流，不需要接再串联一个负载：有些线性电源两个通道可以串联，并联起来使用；
d3 节点生成子节点
05-24
在 D3.js 中，可以使用 `selection.append()` 方法来向选定的节点添加子节点。该方法会将新节点添加到选定节点的末尾，并返回对新节点的引用。 以下是一个示例，演示如何使用 `selection.append()` 方法向一个 `<div>` 元素添加子元素 `<p>`： ```javascript var div = d3.select("div"); div.append("p") .text("这是一个段落。"); ``` 在上述示例中，`d3.select("div")` 选定了一个 `<div>` 元素，并使用 `append()` 方法添加了一个子元素 `<p>`。`.text()` 方法用于设置新节点的文本内容。 你也可以使用 `selection.insert()` 方法来向选定节点插入子节点，具体使用方法可以参考 D3.js 文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值