js画思维导图代码

最新推荐文章于 2024-06-24 10:32:02 发布

赵灵越

最新推荐文章于 2024-06-24 10:32:02 发布

阅读量572

点赞数 5

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_73675558/article/details/139103661

版权

在JavaScript中，您可以使用各种库来绘制思维导图，例如mindmap.js、d3.js或go.js。下面是一个简单的例子，展示了如何使用d3.js来绘制一个基本的思维导图。
首先，您需要在HTML文件中包含d3.js库：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mind Map</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <svg id="mindmap"></svg>
    <script src="mindmap.js"></script>
</body>
</html>

然后，在mindmap.js文件中，您可以编写以下JavaScript代码来创建一个简单的思维导图：

// 定义思维导图的数据结构
const data = {
    name: "中心主题",
    children: [
        { name: "分支主题1" },
        { name: "分支主题2" },
        { name: "分支主题3" },
        { name: "分支主题4" }
    ]
};
// 设置SVG画布的尺寸
const width = 800;
const height = 600;
// 创建一个模拟力布局
const simulation = d3.forceSimulation(data.children)
    .force("charge", d3.forceManyBody().strength(-200)) // 节点之间的电荷力
    .force("link", d3.forceLink().id(d => d.name)) // 节点之间的连线
    .force("center", d3.forceCenter(width / 2, height / 2)); // 将节点中心定位到画布中心
// 绘制思维导图
const svg = d3.select("#mindmap")
    .attr("width", width)
    .attr("height", height);
// 绘制连线
const links = svg.selectAll("line")
    .data(data.children)
    .enter().append("line")
    .attr("stroke", "black");
// 绘制节点
const nodes = svg.selectAll("circle")
    .data(data.children)
    .enter().append("circle")
    .attr("r", 10)
    .attr("fill", "lightgrey")
    .call(drag(simulation));
// 绘制节点文本
const texts = svg.selectAll("text")
    .data(data.children)
    .enter().append("text")
    .text(d => d.name)
    .attr("text-anchor", "middle")
    .attr("dy", ".35em");
// 更新节点和连线的位置
simulation.on("tick", () => {
    nodes.attr("cx", d => d.x).attr("cy", d => d.y);
    texts.attr("x", d => d.x).attr("y", d => d.y);
    links.attr("x1", d => data.x).attr("y1", d => data.y)
        .attr("x2", d => d.x).attr("y2", d => d.y);
});
// 添加拖拽事件
const drag = simulation => {
    
    function dragstarted(event) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        event.subject.fx = event.subject.x;
        event.subject.fy = event.subject.y;
    }
    
    function dragged(event) {
        event.subject.fx = event.x;
        event.subject.fy = event.y;
    }
    
    function dragended(event) {
        if (!event.active) simulation.alphaTarget(0);
        event.subject.fx = null;
        event.subject.fy = null;
    }
    
    return d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);
};

这段代码创建了一个简单的思维导图，其中包含一个中心主题和四个分支主题。节点之间通过连线连接，并且可以通过拖拽来移动。这是一个基本的示例，您可以根据需要添加更多的功能和样式。
请注意，这个示例使用了d3.js版本6，如果您使用的是不同版本的d3.js，可能需要调整代码以适应对应的API。

直接转成图片保存

要将JavaScript生成的思维导图保存为图片，您可以使用HTML5的canvas元素来绘制图形，并使用canvas的toDataURL方法将其转换为图像数据URL。然后，您可以利用这个URL来下载图片或者将其显示在页面上。
以下是一个简化的例子，展示了如何将使用d3.js绘制的思维导图转换为图片：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mind Map to Image</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <button id="save-button">Save as Image</button>
    <script>
        // 定义思维导图的数据结构
        const data = {
            name: "中心主题",
            children: [
                { name: "分支主题1" },
                { name: "分支主题2" },
                { name: "分支主题3" },
                { name: "分支主题4" }
            ]
        };
        // 设置SVG画布的尺寸
        const width = 800;
        const height = 600;
        // 创建一个SVG元素
        const svg = d3.create("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("viewBox", [0, 0, width, height]);
        // ... 在这里添加绘制思维导图的代码 ...
        // 将SVG转换为Canvas，然后转换为图片
        function saveAsImage() {
            // 创建一个新的canvas元素
            const canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            const context = canvas.getContext("2d");
            // 使用svg2canvas库将SVG转换为Canvas
            svg2canvas(svg.node(), context);
            // 将Canvas转换为图片数据URL
            const image = canvas.toDataURL("image/png");
            // 创建一个a元素来下载图片
            const a = document.createElement("a");
            a.href = image;
            a.download = "mindmap.png";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
        // 绑定按钮点击事件
        document.getElementById("save-button").addEventListener("click", saveAsImage);
    </script>
    <script src="https://cdn.jsdelivr.net/npm/svg2canvas/dist/svg2canvas.min.js"></script>
</body>
</html>

在这个例子中，我们使用了svg2canvas库来将SVG图形转换为Canvas图形。这是因为d3.js创建的是SVG元素，而canvas的toDataURL方法只能直接应用于canvas元素。svg2canvas库可以帮助我们完成这个转换。
请注意，您需要将svg2canvas库包含在您的项目中，可以通过CDN链接或者将其下载到您的项目中。上面的代码中已经通过CDN链接包含了svg2canvas库。
当用户点击“Save as Image”按钮时，saveAsImage函数会被调用，它会创建一个canvas元素，将SVG图形转换为canvas图形，然后将其转换为图片数据URL，并触发下载。

赵灵越

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js画思维导图代码

在JavaScript中，您可以使用各种库来绘制思维导图，例如mindmap.jsd3.js或go.js。下面是一个简单的例子，展示了如何使用d3.js来绘制一个基本的思维导图。首先，您需要在HTML文件中包含d3.js</</</</</</</然后，在mindmap.js这段代码创建了一个简单的思维导图，其中包含一个中心主题和四个分支主题。节点之间通过连线连接，并且可以通过拖拽来移动。这是一个基本的示例，您可以根据需要添加更多的功能和样式。请注意，这个示例使用了d3.js。
复制链接

扫一扫