Chrome SVGのチャートの矢頭のマーカーmidが代わりに3回表示されます。

Question

D3.jsに単純なフォースチャートを作成しました。

ノードがあり、ノード間にマーカーが中央にある（マーク付きのミッドを使用）リンクがあります。

問題は、何らかの理由でChromeでこのマーカーが3回レンダリングされているということです.IEとFFでは、正常に動作します。

以下、私はSVGでコードを投稿していますが、これはD3.jsに接続されていないパスの問題だと思います。

<svg class="baseSVG" style="width: 100%; height: 90%;"> 
    <g class="chart_wrapper"> 
    <g class="links"> 
     <g class="link_wrapper"> 
     <path class="link hate" marker-mid="url(#arrow)" d="M 342.9891277180959 320.7671874251745 A 190.7182256881292 190.7182256881292 0 0 1 225.76595293193114 281.82896265692517 A 190.7182256881292 190.7182256881292 0 0 1 156.98831902253903 179.22732948826612"></path> 
     </g> 
    </g> 
    <g id="person0" class="node person Adam" transform="translate(156.98831902253903,179.22732948826612)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Adam</text> 
     </g> 
    </g> 
    <g id="person1" class="node person Eve" transform="translate(342.9891277180959,320.7671874251745)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Eve</text> 
     </g> 
    </g> 
    <g id="person2" class="node person Kazik" transform="translate(179.355374155828,342.83615430106596)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Kazik</text> 
     </g> 
    </g> 
    <g id="person3" class="node person Janina" transform="translate(320.66071665952427,157.09136472857676)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Janina</text> 
     </g> 
    </g> 
    </g> 
    <defs> 
    <marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto"> 
     <path d="M0,-5L10,0L0,5" transform="translate(20)"></path> 
     <path d="M0,0L10,-5L10,5" transform="translate(0)"></path> 
    </marker> 
    </defs> 
    <defs></defs> 
    <defs> 
    <marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow"> 
     <path d="M0,-5L10,0L0,5"></path> 
    </marker> 
    </defs> 
    <defs></defs> 
</svg> 

Example in JSFiddle

Answer 1

誰かが答えを探している場合。

@theOneGuyと@echonaxが正しくありました。修正するには、marker-midは使用できず、代わりにmarker-startを使用します。

marker-midの行を表示する1つのパス定義の代わりに、グラフ上で1つの行を作成する2つのパスがあります。第2の経路はマーカー開始を有する。

マーカーはz-インデックスの上にある必要があるため、2番目のパスで開始します。

<svg class="baseSVG" style="width: 100%; height: 90%;"> 
    <g class="chart_wrapper"> 
    <g class="links"> 
     <g class="link_wrapper"> 
     <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 L 242.21936721772218 252.41406759336707"></path> 
     <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 242.21936721772218 252.41406759336707 L 137.63410024475814 280.8314657786965"></path> 
     </g> 
     <g class="link_wrapper"> 
     <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 A 303.64066468574316 303.64066468574316 0 0 1 247.4635305967095 271.71429428774377"></path> 
     <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 247.4635305967095 271.71429428774377 A 303.64066468574316 303.64066468574316 0 0 1 137.63410024475814 280.8314657786965"></path> 
     </g> 
     <g class="link_wrapper"> 
     <path class="link hate half1" half1="true" d="M 137.63410024475814 280.8314657786965 A 166.82033234287158 166.82033234287158 0 0 1 231.73104045974543 213.81361420460564"></path> 
     <path class="link hate half2" marker-start="url(#double-arrow)" half1="false" d="M 231.73104045974543 213.81361420460564 A 166.82033234287158 166.82033234287158 0 0 1 346.8046341906862 223.99666940803763"></path> 
     </g> 
    </g> 
    <g id="person0" class="node person Adam" transform="translate(346.8046341906862,223.99666940803763)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Adam</text> 
     </g> 
    </g> 
    <g id="person1" class="node person Eve" transform="translate(137.63410024475814,280.8314657786965)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Eve</text> 
     </g> 
    </g> 
    <g id="person2" class="node person Kazik" transform="translate(289.2970047078608,367.65475135214126)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Kazik</text> 
     </g> 
    </g> 
    <g id="person3" class="node person Janina" transform="translate(226.0636547128077,127.42597160431035)"> 
     <g class="node_inner" transform="translate(-50,-30)"> 
     <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect> 
     <text text-anchor="middle" transform="translate(50,70)">Janina</text> 
     </g> 
    </g> 
    </g> 
    <defs> 
    <marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto"> 
     <path d="M0,-5L10,0L0,5" transform="translate(20)"></path> 
     <path d="M0,0L10,-5L10,5" transform="translate(0)"></path> 
    </marker> 
    </defs> 
    <defs> 
    <marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow"> 
     <path d="M0,-5L10,0L0,5"></path> 
    </marker> 
    </defs> 
</svg> 

はまた、私はあなたが最初のVIを作成しているどのようにJs Fiddle