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

你在rect 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

工作小提琴here

要使多边形出现在矩形内，您需要相应地提供多边形点/坐标。只需在rect DOM元素中创建多边形就不会使其显示为矩形。希望这能解决你的问题。

d3.js在矩形

1 个答案: