个人中心
gpt4 book ai didi

javascript - 将两个元素附加在同一级别的 svg 中

转载 作者：行者123 更新时间：2023-12-04 08:22:27 25 4
gpt4 key购买 nike

我正在使用 d3.js
嗨，我在查找如何从相同的数据将两个元素(路径和图像)附加到相同的 g(在我的 svg 中)时遇到问题。我知道怎么做，但棘手的是我需要获取“路径”元素的 BBox 值，以便将“图像”元素放在中间......我的目标实际上是在像这样的 map 上的城市中心:this is the map I am trying to reproduce
在 map 上它没有居中，但我必须这样做。所以这是我当前的代码:

// Draw the map
svg.append("g")
    .selectAll("path")
    .data(mapEPCI.features)
    .enter()
    .append("path")
    .attr("fill", d => d.properties.color)
    .attr("d", d3.geoPath().projection(projection))
    .style("stroke", "white")
    .append("image")
        .attr("xlink:href", function(d) {
            if (d.properties.plan_air == 1)
                return ("data/page8_territoires/cloud.png")
            else if (d.properties.plan_air == 2)
                return ("data/page8_territoires/cloudgray.png")
        })
        .attr("width", "20")
        .attr("height", "15")
        .attr("x", function (d) {
            let bbox = d3.select(this.parentNode).node().getBBox();
            return bbox.x + 30})
        .attr("y", function (d) {
            return d3.select(this.parentNode).node().getBBox().y + 30})
这为我的图像获得了正确的坐标，但这是因为父节点实际上是路径......如果我将图像附加到 g 元素，有没有办法获得“BrotherNode”，或者“的最后一个子节点” g”元素？我不知道我是否足够清楚，但我希望你明白我的意思。
我对 js 有点陌生，所以也许我错过了一些我还不知道的简单东西
谢谢你的帮助

最佳答案

我会在 g 处理您的数据级别并为每个包含路径和兄弟图像的 map 特征(国家/地区)创建一个组:

<!doctype html>

<html>

<head>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body>
  <svg width="600" height="600"></svg>
  <script>
    let svg = d3.select('svg'),
      mapEPCI = {
        features: [100, 200, 300, 400]
      };

    let g = svg.selectAll('g')
      .data(mapEPCI.features)

    // enter selection is collection of g
    let ge = g.enter().append("g");

    // append a path to each g according to data
    ge.append('path')
      .attr("d", (d) => "M" + d + ",10L" + d + ",100")
      .style("stroke", "black");

    // append a sibling image
    ge.append("image")
      .attr("xlink:href", "https://placeimg.com/20/15/animals")
      .attr("width", "20")
      .attr("height", "15")
      .attr("transform", function(d) {
        // find my sibling path to get bbox
        let sibling = this.parentNode.firstChild;
        let bbox = sibling.getBBox();
        return "translate(" + (bbox.x - 20 / 2) + "," + (bbox.y + bbox.height / 2 - 15 / 2) + ")"
      });
  </script>
</body>

</html>

关于javascript - 将两个元素附加在同一级别的 svg 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65434376/

25 4 0
文章推荐： unity3d - 如何将电脑桌面分享到HoloLens2？
文章推荐： react-native - 用 Jest 测试react-native应用程序时未定义XMLHttpRequest
文章推荐： apache-kafka-streams - 卡夫卡流 : Handle Aging of events in a stream on window expiry
文章推荐： android - 多个设备/模拟器 - 尝试使用 Genymobile 进行转换时出错
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com