d3.js - d3.js のカスタム形状

Question

複数の座標（x、y）と同じsvgコンテナに1つの長方形を与えることにより、パスの概念を使用してシェブロンを描画しました。その長方形にシェブロンを単一の形状として追加する方法は？

 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);