d3.js 使用d3在单个图像上附加多个多边形

1rhkuytd  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(159)

这些多边形来自变量,并存储在多边形中,因此多边形显示在整个网页上,但我希望所有多边形显示在一张图像上,因此我应该如何使用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"); }

...

csbfibhn

csbfibhn1#

使用svg的viewBox属性。viewBox应该与图像的边距匹配,并且应该扩展到图像的高度和宽度。一旦设置了viewBox,更改css以将svg覆盖在图像上。我已经为示例图像更改了下面的代码
第一个

bvn4nwqk

bvn4nwqk2#

多边形在整个网页上显示并希望它们显示在特定的图像上,这到底是什么意思?

相关问题