d3.js - d3.js 中的自定义形状

Question

我通过在同一个svg容器中给出多个坐标（x，y）和一个矩形来使用路径概念绘制雪佛龙。如何在该矩形中添加雪佛龙作为单个形状？

 var lineFunction = d3.svg.line()
                      .x(function(d) { return d.x; })
                      .y(function(d) { return d.y; })
                     .interpolate("linear");

//The custom shape 
    var customshape = svgContainer.append("path")
                                .attr("d", lineFunction(lineData))
                                .attr("stroke", color)
                                .attr("stroke-width", 2)
                                .style("fill", color)
                                .style("opacity",0.6);
      //rectangle       
      var rectBox = svgContainer.append("rect")
                .attr("x",x_init)
                .attr("y",y_init)
                .attr("width",wid)
                .attr("height",hi)
                .attr("stroke-width",1)
                .attr("stroke","none")
                .attr("fill",rec_color)
                .style("opacity",0.9);