d3.js - 在具有缩放事件的 <g> 内的两个元素之间放置一条线？-6ren

d3.js - 在具有缩放事件的内的两个元素之间放置一条线？

转载作者：行者123 更新时间：2023-12-04 15:16:49

我有这段代码，我有一个算法可以在两个节点之间放置线。我希望此行将 #nodo4 与 #nodo6 连接起来，矩形 是 节点 并且每个与其 id 同名。

代码有点长，但实现这一点的重要部分在这里:

setTimeout(() => {
    let source = d3.select("#node4");
    let target = d3.select("#node6");
    source.datum(source.node().getBoundingClientRect())
        .attr('nodeX', d => d.x + d.width / 2)
        .attr('nodeY', d => d.y + d.height / 2)

    target.datum(target.node().getBoundingClientRect())
        .attr('nodeX', d => d.x + d.width / 2)
        .attr('nodeY', d => d.y + d.height / 2)

    d3.select("#g_main").append("line")
        .style("stroke", "black") // colour the line
        .attr("x1", source.attr('nodeX')) // x position of the first end of the line
        .attr("y1", source.attr('nodeY')) // y position of the first end of the line
        .attr("x2", target.attr('nodeX')) // x position of the second end of the line
        .attr("y2", target.attr('nodeY')); // y position of the second end of the line

}, 5000)

但考虑到我可以不断缩放和平移，我无法让线条出现在它应该出现的位置。我想要一个动态解决方案，因为将来我想放一条连接到其他节点的线，我想做这个动态计算。我做错了什么？

var width = 960,
    height = 800;
var i = 0,
    duration = 750,
    rectW = 100,
    rectH = 30;
var tree = d3.layout.tree().nodeSize([220, 40]);
var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        return [d.x + rectW / 2, d.y + rectH / 2];
    });

var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000).style("border", "1px solid red")
    .call(zm = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", redraw)).append("g").attr("id", "g_main")
    .attr("transform", "translate(" + 350 + "," + 20 + ")");

//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);


var root = {
    "name": "node6",
    "children": [{
            "name": "node5",
            "respuesta": "SI",
            "children": [{
                "name": "node4",
                "children": [{
                    "name": "node3"
                }]
            }]
        }, {
            "name": "node2",
            "respuesta": "NO"
        },

        {
            "name": "node1",
            "respuesta": "SI"
        }
    ]
}
root.x0 = 0;
root.y0 = height / 2;
root.children.forEach(collapse);
update(root);


root.x0 = 0;
root.y0 = height / 2;

setTimeout(() => {
    let source = d3.select("#node4");
    let target = d3.select("#node6");
    source.datum(source.node().getBoundingClientRect())
        .attr('nodeX', d => d.x + d.width / 2)
        .attr('nodeY', d => d.y + d.height / 2)

    target.datum(target.node().getBoundingClientRect())
        .attr('nodeX', d => d.x + d.width / 2)
        .attr('nodeY', d => d.y + d.height / 2)

    d3.select("#g_main").append("line")
        .style("stroke", "black") // colour the line
        .attr("x1", source.attr('nodeX')) // x position of the first end of the line
        .attr("y1", source.attr('nodeY')) // y position of the first end of the line
        .attr("x2", target.attr('nodeX')) // x position of the second end of the line
        .attr("y2", target.attr('nodeY')); // y position of the second end of the line

}, 5000)

function collapse(d) {
    if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        // d.children = null;
    }
}

root.children.forEach(collapse);
update(root);

d3.select("#body").style("height", "800px");

function update(source) {

    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

    // Normalize for fixed-depth.
    nodes.forEach(function(d) {
        d.y = d.depth * 180;
    });

    // Update the nodes…
    var node = svg.selectAll("g.node")
        .data(nodes, function(d) {
            return d.id || (d.id = ++i);
        });

    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + source.x0 + "," + source.y0 + ")";
        })

    nodeEnter.append("rect")
        .attr("id", function(d) {
            return "node" + d.id
        })
        .attr("width", rectW)
        .attr("height", rectH)
        .attr("stroke", "white")
        .attr("stroke-width", 1)
        .style("fill", function(d) {
            return d._children ? "lightsteelblue" : "#fff";
        });

    nodeEnter.append("image").attr("href", "plus-flat.png").attr("width", (d) => {
        let length = 0;
        if (d.children) {
            length = d.children.length;
        } else {
            length = 0;
        }
        if (d.name == "INICIO" && length == 0) {
            return 0;
        } else if (d.name == "INICIO" && length != 0) {
            return 0;
        } else {
            return 25;
        }

    }).style("transform", "translate(65px, -10px)")
    nodeEnter.append("text")
        .attr("x", rectW / 2)
        .attr("y", rectH / 2)
        .attr("dy", ".35em")
        .text(function(d) {
            return d.name;
        })



    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

    nodeUpdate.select("rect")
        .attr("width", rectW)
        .attr("height", rectH)
        .attr("stroke", "black")
        .attr("stroke-width", 1)
        .style("fill", function(d) {
            return d._children ? "lightsteelblue" : "#fff";
        });

    nodeUpdate.select("text")
        .style("fill-opacity", 1);

    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + source.x + "," + source.y + ")";
        })
        .remove();

    nodeExit.select("rect")
        .attr("width", rectW)
        .attr("height", rectH)
        //.attr("width", bbox.getBBox().width)""
        //.attr("height", bbox.getBBox().height)
        .attr("stroke", "black")
        .attr("stroke-width", 1);

    nodeExit.select("text");

    // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function(d) {
            return d.target.id;
        });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .style("stroke", (d) => {
            let respuesta = d.target.respuesta;
            if (respuesta == "SI") {
                return "#2a8841";
            } else if (respuesta == "NO") {
                return "#d44646";

            } else {
                return "#b7b7b7";
            }
        })
        .attr("x", rectW / 2)
        .attr("y", rectH / 2)
        .attr("d", function(d) {
            var o = {
                x: source.x0,
                y: source.y0
            };
            return diagonal({
                source: o,
                target: o
            });
        });


    // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
            var o = {
                x: source.x,
                y: source.y
            };
            return diagonal({
                source: o,
                target: o
            });
        })
        .remove();
    link.append("text").text("otros")

    // Stash the old positions for transition.
    nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });
}

// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d);
}

//Redraw for zoom
function redraw() {
    //console.log("here", d3.event.translate, d3.event.scale);
    svg.attr("transform",
        "translate(" + d3.event.translate + ")" +
        " scale(" + d3.event.scale + ")");
}

.node {
    cursor: pointer;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

body {
    overflow: hidden;
}

<script src="https://d3js.org/d3.v3.js"></script>
<div id="body"></div>

预期的结果，是这样的:

最佳答案

不要覆盖源和目标的datum。这意味着您将无法重绘树，因为您覆盖了它所需的所有值。

另外，不要使用getBoundingClientRect()。如果缩放或平移怎么办？它扭曲了，线永远不会在正确的位置。

相反，依赖于您已经提供给节点的数据，您已经拥有它，并且可以通过不带参数调用 .datum() 来访问它!然后，计算节点的位置没有问题，也没有问题在您想要的位置精确添加一条线，无论缩放或滚动。

var width = 960,
  height = 800;
var i = 0,
  duration = 750,
  rectW = 100,
  rectH = 30;
var tree = d3.layout.tree().nodeSize([220, 40]);
var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.x + rectW / 2, d.y + rectH / 2];
  });

var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000).style("border", "1px solid red")
  .call(zm = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", redraw)).append("g").attr("id", "g_main")
  .attr("transform", "translate(" + 350 + "," + 20 + ")");

//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);


var root = {
  "name": "node6",
  "children": [{
      "name": "node5",
      "respuesta": "SI",
      "children": [{
        "name": "node4",
        "children": [{
          "name": "node3"
        }]
      }]
    }, {
      "name": "node2",
      "respuesta": "NO"
    },

    {
      "name": "node1",
      "respuesta": "SI"
    }
  ]
}
root.x0 = 0;
root.y0 = height / 2;
root.children.forEach(collapse);
update(root);


root.x0 = 0;
root.y0 = height / 2;

setTimeout(() => {
  let source = d3.select("#node4").datum();
  let target = d3.select("#node6").datum();

  d3.select("#g_main").append("line")
    .style("stroke", "black") // colour the line
    .attr("x1", source.x0 + rectW / 2) // x position of the first end of the line
    .attr("y1", source.y0) // y position of the first end of the line
    .attr("x2", target.x0 + rectW / 2) // x position of the second end of the line
    .attr("y2", target.y0 + rectH); // y position of the second end of the line

}, 1000)

function collapse(d) {
  if (d.children) {
    d._children = d.children;
    d._children.forEach(collapse);
    // d.children = null;
  }
}

root.children.forEach(collapse);
update(root);

d3.select("#body").style("height", "800px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
    links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) {
    d.y = d.depth * 180;
  });

  // Update the nodes…
  var node = svg.selectAll("g.node")
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + source.x0 + "," + source.y0 + ")";
    })

  nodeEnter.append("rect")
    .attr("id", function(d) {
      return "node" + d.id
    })
    .attr("width", rectW)
    .attr("height", rectH)
    .attr("stroke", "white")
    .attr("stroke-width", 1)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeEnter.append("image").attr("href", "plus-flat.png").attr("width", (d) => {
    let length = 0;
    if (d.children) {
      length = d.children.length;
    } else {
      length = 0;
    }
    if (d.name == "INICIO" && length == 0) {
      return 0;
    } else if (d.name == "INICIO" && length != 0) {
      return 0;
    } else {
      return 25;
    }

  }).style("transform", "translate(65px, -10px)")
  nodeEnter.append("text")
    .attr("x", rectW / 2)
    .attr("y", rectH / 2)
    .attr("dy", ".35em")
    .text(function(d) {
      return d.name;
    })



  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

  nodeUpdate.select("rect")
    .attr("width", rectW)
    .attr("height", rectH)
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeUpdate.select("text")
    .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + source.x + "," + source.y + ")";
    })
    .remove();

  nodeExit.select("rect")
    .attr("width", rectW)
    .attr("height", rectH)
    //.attr("width", bbox.getBBox().width)""
    //.attr("height", bbox.getBBox().height)
    .attr("stroke", "black")
    .attr("stroke-width", 1);

  nodeExit.select("text");

  // Update the links…
  var link = svg.selectAll("path.link")
    .data(links, function(d) {
      return d.target.id;
    });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .style("stroke", (d) => {
      let respuesta = d.target.respuesta;
      if (respuesta == "SI") {
        return "#2a8841";
      } else if (respuesta == "NO") {
        return "#d44646";

      } else {
        return "#b7b7b7";
      }
    })
    .attr("x", rectW / 2)
    .attr("y", rectH / 2)
    .attr("d", function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      };
      return diagonal({
        source: o,
        target: o
      });
    });


  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
      var o = {
        x: source.x,
        y: source.y
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .remove();
  link.append("text").text("otros")

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

//Redraw for zoom
function redraw() {
  //console.log("here", d3.event.translate, d3.event.scale);
  svg.attr("transform",
    "translate(" + d3.event.translate + ")" +
    " scale(" + d3.event.scale + ")");
}

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

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

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

body {
  overflow: hidden;
}

<script src="https://d3js.org/d3.v3.js"></script>
<div id="body"></div>

关于d3.js - 在具有缩放事件的 <g> 内的两个元素之间放置一条线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64166539/

文章推荐： c# - 无法将 SignalR IHubContext 注入(inject)类

文章推荐： html - 使用 emmet 缩写创建颜色

文章推荐： amazon-web-services - 从 AWS ECS Fargate 访问 AWS RDS 的最佳方式

文章推荐： python - 从 Django 服务器一次流式传输多个文件

javascript - 使用 Javascript 缩放/缩放/调整多个图像大小的最佳方法？
我在 div 和 jquery ui slider 中有一个图像列表，当用户滑动栏时，图像应该调整大小/缩放(无论你想怎么调用它)，我尝试选择所有图像并更改 css 的宽度和使用 jquery 的高度
javascript - 工具提示随 d3 地理 map 缩放(缩放)
我正在制作一张具有缩放和平移功能的世界地图。我在某些城市上画了圆圈，圆圈的半径由数据决定。当鼠标悬停在这些圆圈上时，将出现一个工具提示来显示数据。代码结构为 //在此选择上调用缩放行为 - 让我们调
jQuery UI slider 小部件 + fancybox + 缩放/缩放
我正在使用 jquery UI slider (http://jqueryui.com/slider/)。我需要对整个站点进行缩放。使用 css 样式在 IE+Chrome im 中缩放 - “缩放
ios - 如何将 UIView 缩放(缩放)到给定的 CGPoint
我花了很多时间试图找到一种使用 CGAffineScale 将 View 转换为给定点的方法，包括摆弄 anchor 、在转换前后移动 View 的中心以及全面的谷歌搜索。我知道使用 UIScroll
android - 使用 onTouchEvent Android 旋转、缩放/缩放、拖动位图
我希望能够用手指旋转和缩放/缩放我的位图，我已经为此寻找了所有示例项目，但它们都与我的代码不匹配。这是我的 onTouchListener 代码。 public class MyView extend
html - 使用 CSS3 变换 scale() 缩放/缩放 DOM 元素及其占用的空间
在我的页面中间，我有一个 div 元素，其中包含一些内容(其他 div、图像等)。 before something inside another something
javascript - 缩放/缩放 Div 后在 Google Maps API v3 上使用绘图管理器？
我一直在尝试使用 google maps API V3 的绘图管理器(绘制矩形)。使用 -webkit-transform 缩放谷歌地图 Canvas (包含 div)后像这样 var transf
ios模拟器窗口缩放/缩放
这个问题在这里已经有了答案: How to resize the iPhone/iPad Simulator? (12 个答案) 关闭 5 年前。我正在编写 iOS 应用我使用 Xcode 6.
docker - 自动化微服务负载平衡/缩放
这几天一直在研究微服务，我想知道人们是如何着手自动化负载平衡和扩展这些东西的？我心中有一个特定的场景，我想实现什么，但不确定是否可行，或者我的想法有误。就这样吧…… 假设我有一个由 3 台名为 A、
FFMPEG 缩放、缩放和连接过滤器
我正在使用 ffmpeg for android 来制作 mp4 格式的视频。我无法让这个命令在 FFMPEG 中工作，基本上我正在尝试添加两个图像，缩放它们，添加缩放效果，最后将结果连接到一个视频文
opengl - 缩放、平移和旋转如何工作？
使用 OpenGL 我正在尝试绘制我校园的原始 map 。谁能向我解释一下平移、缩放和旋转通常是如何实现的？例如，通过平移和缩放，这仅仅是我调整我的视口(viewport)吗？所以我绘制并绘制了构
iphone - 缩放/旋转界面中的按钮
我需要在 iphone sdk 界面生成器中将按钮旋转 30 度，该怎么做？最佳答案您无法在 Interface Builder 中执行此操作，但代码非常简单。确保您已将 IB 中的按钮连接到
javascript - 检测触摸设备捏合程度(缩放)
假设默认级别等于“1”，是否可以检测触摸设备的捏合(缩放)级别？原因是我希望根据捏合级别禁用页面元素(显示:无)。如果可以将其放在一个设置缩放级别值的函数中，那就太好了，例如: var ZOOM =
javascript - 在鼠标位置缩放/缩放
我正在努力找出并确定如何根据这个例子放大我的鼠标位置。 (https://stackblitz.com/edit/js-fxnmkm?file=index.js) let node, scal
ios - UIWebView 缩放
我已将 UIWebView 的“scalesPageToFit”属性设置为 YES。它正在缩放，但是当页面加载时，内容的字体很小，不捏就无法阅读。我们可以将缩放比例设置为默认值吗？最佳答案这更多
mobile - 如何在图像上进行捏合/缩放
我仍在学习 jQuery mobile 的技巧，并且在 data-role="page"上放大和缩小图片/图像时遇到问题。有没有办法使用 jquery mobile 在 iPhone 上的图像上进行捏
python - 缩放/旋转成对平方欧氏距离的矢量化计算
给定一组 n 个维度为 d 的向量，存储在 (n,d) 数组中，以及第二组 m 相同维度的向量(存储在 (m,d) 数组中)我想计算向量之间的平方点距离，由大小为的某个矩阵 A 缩放>(d,d)。
jQuery 悬停功能缩放/缩放
我想知道是否有人可以指出我正确的方向。我使用 CSS3 过渡创建了缩放效果。将鼠标悬停在该对象上，它会转换为更大的版本。这看起来很棒并且效果很棒，但问题是这种效果在 IE 中不起作用，所以我需要在
javascript - 缩放/取消缩放时标记从其位置移动
mapbox-gl-js 版本:0.38.0在 ionic 2.2.11 上通过 npm repo 使用正如您在这张 gif 上看到的 https://giphy.com/gifs/ionic-an
android - 缩放 Activity
所以我花了几个小时在网上搜索帮助，但所有论坛和文档都没有向我正确解释我应该采取的最佳方式。目前我有一个具有 XML 相对布局的 Activity (背景设置为 map 图片)，我想实现多手势缩放功能

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - 在具有缩放事件的内的两个元素之间放置一条线？

首页

博学

6Ren·AI

商城

d3.js - 在具有缩放事件的 内的两个元素之间放置一条线？

d3.js - 在具有缩放事件的内的两个元素之间放置一条线？