使用D3在单个图像上附加多个多边形

发布于 2025-02-05 16:53:43 字数 731 浏览 5 评论 0原文

我有这些多边形来自变量并存储在poly中，因此在网页上显示多边形，但我希望所有多边形都显示在单个图像上，因此我应该在此处使用D3在此处编写代码以显示所有的代码多边形仅在该特定图像上。

请帮助，在过去的几天里，我一直在尝试这些方法，但找不到适当的解决方案。

...

   var vis = d3.select("body").append("svg")
     .attr("width", 1000)
     .attr("height", 667),
       
       
     
    
      poly = [{"x":x1, "y":y1},
              {"x":x2,"y":y2},
              {"x":x3,"y":y3},
              {"x":x4,"y":y4}];
      
      vis.selectAll("polygon")
          .data([poly])
        .enter().append("polygon")
          .attr("points",function(d) { 
              return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
          .attr("stroke","red")
        .attr("fill","none"); }

... ...

原文

I have these polygons coming from variables and being stored in poly, so polygons are being displayed all over the webpage but I want all the polygons to be displayed on a single image, so how should I write the code here using D3 to display all the polygons on that specific image only.

Please help, I have been trying these for the last few days but couldn't find a proper solution.

...

   var vis = d3.select("body").append("svg")
     .attr("width", 1000)
     .attr("height", 667),
       
       
     
    
      poly = [{"x":x1, "y":y1},
              {"x":x2,"y":y2},
              {"x":x3,"y":y3},
              {"x":x4,"y":y4}];
      
      vis.selectAll("polygon")
          .data([poly])
        .enter().append("polygon")
          .attr("points",function(d) { 
              return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
          .attr("stroke","red")
        .attr("fill","none"); }

...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人疚 2025-02-12 16:53:46

使用SVG的ViewBox属性。查看框应匹配图像的边缘，并应扩展到图像的高度和宽度。设置了视图框后，将CSS更改以覆盖SVG超过图像。
我已经更改了下面的代码以获取示例图像

var vis = d3.select("#overlay").append("svg")
         .attr("width", 200)
         .attr("height", 300)
         .attr("viewBox","-10 0 200 200");        
         
        
         var poly = [{"x":20, "y":50},
                  {"x":30,"y":0},
                  {"x":40,"y":10},
                  {"x":50,"y":60}];
          
          vis.selectAll("polygon")
              .data([poly])
            .enter().append("polygon")
              .attr("points",function(d) { 
                  return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
              .attr("stroke","red")
            .attr("fill","none");

svg{
z-index:1000;
}


.img-overlay {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
  margin-left:10px;
}


.img-overlay svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
<div id="overlay" class="img-overlay">
<img id="vv" src="https://via.placeholder.com/200" ></img>
</div>
</body>

Use the viewBox property of the svg. Viewbox should match the margins of the image and it should expand to the height and width of the image. Once viewBox is set, change the css for overlay of the svg over image.
I have changed the code below for a sample image

var vis = d3.select("#overlay").append("svg")
         .attr("width", 200)
         .attr("height", 300)
         .attr("viewBox","-10 0 200 200");        
         
        
         var poly = [{"x":20, "y":50},
                  {"x":30,"y":0},
                  {"x":40,"y":10},
                  {"x":50,"y":60}];
          
          vis.selectAll("polygon")
              .data([poly])
            .enter().append("polygon")
              .attr("points",function(d) { 
                  return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");})
              .attr("stroke","red")
            .attr("fill","none");

svg{
z-index:1000;
}


.img-overlay {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
  margin-left:10px;
}


.img-overlay svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
<div id="overlay" class="img-overlay">
<img id="vv" src="https://via.placeholder.com/200" ></img>
</div>
</body>

回复收藏 0 原文