d3.js在矩形內添加多邊形

Question

如何在矩形內添加多邊形？，下面是我有的代碼，但它沒有顯示矩形內的多邊形。你可以幫我嗎。

var svgContainer = d3.select("body").append("svg") 

var rectangle = svgContainer.append("rect") 
           .style("stroke", "black") 
           .style("fill", "none") 
          .attr("x", 50) 
          .attr("y", 50) 
          .attr("width", 100) 
          .attr("height", 100); 


var cir = rectangle.append("polygon")  // attach a polygon 
    .style("stroke", "black") // colour the line 
    .style("fill", "none")  // remove any fill colour 
    .attr("points", "30,50,100,150,100,150"); // x,y points 

Answer 1

您正在使用的矩形DOM這是不正確使多邊形 你應該多邊形連接到SVG 所以應該

svgContainer.append("polygon") 

下面

糾正代碼：

var svgContainer = d3.select("body").append("svg") 

var rectangle = svgContainer.append("rect") 
           .style("stroke", "black") 
           .style("fill", "none") 
          .attr("x", 50) 
          .attr("y", 50) 
          .attr("width", 100) 
          .attr("height", 100); 


var cir = svgContainer.append("polygon")  // attach a polygon to the svg 
    .style("stroke", "black") // colour the line 
    .style("fill", "none")  // remove any fill colour 
    .attr("points", "30,50,100,150,100,150"); // x,y points 

工作小提琴​​

要使多邊形出現在矩形內，您需要相應地提供多邊形點/座標。 只需使rect DOM元素中的多邊形不會使其顯示矩形。 希望這可以消除你的擔憂。