我有這些多邊形來自變數并存盤在多邊形中，所以多邊形顯示在整個網頁上，但我希望所有多邊形都顯示在一個影像上，所以我應該如何使用 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"); }
...
uj5u.com熱心網友回復：
使用 svg 的 viewBox 屬性。Viewbox 應該與影像的邊距匹配，并且應該擴展到影像的高度和寬度。設定 viewBox 后，更改 svg 覆寫影像的 css。我已將以下代碼更改為示例影像
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>uj5u.com熱心網友回復：
多邊形顯示在整個網頁上并希望它們顯示在特定影像上到底是什么意思？
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/488303.html
上一篇：與矩形對齊的D3文本