附加非嵌套元素

Question

我正在用D3構建svg。 我想對路徑元素使用裁剪，但是在為clipPath附加defs部分時遇到問題。

這是我的代碼：

function build_svg(div,width,height) {
    var margin={left: 10, top: 20}; 
    return div.append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("defs")
    .append("clipPath")
        .append("rect")
        .attr("x", margin.left)
        .attr("y", margin.top)
        .attr("width", width)
        .attr("height", height)
    .insert("g","defs")
    .attr("transform", "translate("+margin.left+","+margin.top+")");
}

我得到這個：

<svg width="100%" height="100%">
    <defs>
        <clipPath>
            <rect x="40" y="10" width="651" height="214">
                <g transform="translate(40,10)">
                .....
                </g>
            </rect>
        </clipPath>
    </defs>
</svg>

但是我想要這個：

<svg width="100%" height="100%">
    <defs>
        <clipPath>
            <rect x="40" y="10" width="651" height="214"></rect>
        </clipPath>
    </defs>
    <g transform="translate(40,10)">
       .......
    </g>
</svg>

我的錯誤在哪里？

Answer 1

現在您只有一條鏈，因此您所要獲得的結構是預期的。

因此，相反，要打破您的鏈條。 首先，命名SVG選擇：

const svg = div.append("svg")
    .attr("width", "100%")
    .attr("height", "100%");

接着：

svg.append("defs")
    .append("clipPath")
    .append("rect")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", width)
    .attr("height", height);

svg.append("g", "defs")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

請注意您要append組而不是insert組的事實。

這是演示，運行它並檢查SVG：

 function build_svg(div, width, height) { var margin = { left: 10, top: 20 }; const svg = div.append("svg") .attr("width", "100%") .attr("height", "100%"); svg.append("defs") .append("clipPath") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width) .attr("height", height); svg.append("g", "defs") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); }; const div = d3.select("#myDiv"); build_svg(div, 200, 200) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="myDiv"></div> 

您會看到以下結構：

<svg width="100%" height="100%">
  <defs>
    <clipPath>
      <rect x="10" y="20" width="200" height="200"></rect>
    </clipPath>
  </defs>
  <g transform="translate(10,20)"></g>
</svg>