D3.js内の特定のSVGパスを操作する方法

私はD3にとって非常に新しいので、これがばかげた質問であれば事前にお詫びします。私は自分のHTML文書に米国の周りに水域を形成する一連のパスを持っており、クリックするたびに特定のパスを拡大して移動しようとしています。 SVG自体はクライアントから提供されたもので、D3を使用して作成されたものではありません。D3.js内の特定のSVGパスを操作する方法

ここオハイオ川流域のパスの例です：

<svg version="1.1" id="Basins_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" viewBox="0 0 256.1 128.9" style="position:absolute; top:-140px; left:-27px; opacity:0.8;" width="920" height="700" enable-background="new 0 0 256.1 128.9" xml:space="preserve"> 
    <path class="st" id="ohio_3_" fill="#A1A6D0" stroke="#2D2A2B" stroke-width="0.1045" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M209.6,85.3l-1.8-1.4l-1.9-3.2l-0.6-3.6l1.3-3.7c0.8-0.4,1.3-1.1,1.5-1.9c0.3-0.4,0-0.8-0.2-1.1c-0.6-0.9-0.3-2-0.5-3 
    c-0.1-0.7,0.3-1.2,0.5-1.8c0.1-0.3,0.3-0.7,0.5-0.9c0.4-0.3,0.7-0.6,0.4-1.1c0-0.7,0.2-1.4,0.1-2.1c0-0.2,0.1-0.5,0.1-0.7 
    c-0.3-0.9-0.3-0.9,0.4-0.9c0.3,0.2,0.7,0.4,1.2,0.3c0.5-0.1,0.9-0.3,1.2-0.7c0.4-0.4,0.8-0.8,1.1-1.3c0.2-0.6,0.1-1.3,1-1.4 
    c0.1-0.1,0.2-0.1,0.3-0.1c0.4-0.3,1,0,1.3-0.5c0.2-0.2,0.5-0.3,0.7-0.2c0.8,0,1.6-0.2,2.3,0.1l0,0c0.3,0.2,0.4,0.5,0.3,0.8 
    c0,0.5,0.3,0.9,0.6,1.2c0.1,0.1,0.1,0.3,0.1,0.5c0.6,0.3,1.3,0.3,2,0.4h0c0.2,0.5,0.5,0.5,0.9,0.2c0.2-0.2,0.4-0.5,0.5-0.7 
    c0.4-0.8,1.1-0.4,1.7-0.3c0.7,0.2,0.9-0.5,1.3-0.8c0.4-0.2,1.1-0.1,0.9-0.9c0.1-0.1,0.1-0.1,0.2-0.2c0.3-0.2,0.7,0,1.1-0.2 
    c0.1-0.1,0.3-0.2,0.4-0.3c0.6-0.1,1-0.7,1.6-0.7c0.2,0.1,0.5,0.2,0.7,0.3c0.5,0.3,0.7,0.1,0.7-0.5c-0.1-0.4-0.1-0.8,0.3-1 
    c0.1,0,0.1,0,0.1,0c0.4,0.2,0.7,0,0.7-0.5c0.1-0.3,0.1-0.6,0.2-0.9c0.1-0.1,0.1-0.1,0.1-0.2c0.5-0.4,0.9-0.7,1.1-1.3v0 
    c0.3-0.5,0.8-0.8,1.1-1.3l0,0c0.5-0.2,0.9-0.6,1.1-1.1l0,0c0.4-0.2,0.8-0.5,1.1-0.6h0.1c0.5,0.3,1.1,0.7,1.5-0.2 
    c0.1-0.2,0.3-0.2,0.6-0.1l0,0c0.2,0.2,0.5,0.4,0.7,0.7l0,0c0.5,0.6,1.2,0.9,1.6,1.6c0,0.5-0.3,0.7-0.7,0.9c-0.7,0.3-0.9,0.9-1,1.6 
    c-0.1,0.7-0.1,1.4-0.4,2.1c-0.2,0.4,0.1,0.8,0.4,1.1c0.3,0.3,0.7,0.5,0.7,1c-0.1,1-0.7,1.9-0.6,2.9c0.1,0.5-0.3,0.8-0.6,1.1 
    c-0.3,0.4-0.5,0.8-0.6,1.3c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.1,0.6,0.1,0.9c-0.1,0.4-0.2,0.8-0.5,1.2c-0.3,0.9-0.7,1.8-1,2.7 
    c-0.1,0.4-0.4,0.7-0.5,1.1c-0.1,0.2-0.2,0.4-0.3,0.6c-0.2,0.3-0.1,0.8-0.4,1.1l0,0c-0.3,0.5,0.2,0.9,0.3,1.3c0,0.4,0.2,0.5,0.6,0.5 
    c0.2,0,0.5-0.1,0.4,0.3c-0.1,0.2-0.3,0.4-0.4,0.7c-0.4,0.5-0.8,1.1-1.5,1.2c-0.1,0.1-0.1,0.2-0.2,0.3c-0.3,0.3-0.4,0.8-0.9,0.9l0,0 
    c-0.5,0.2-0.8,0.6-1.1,1c-1,0.6-1.6,1.6-2.1,2.5c0,0.1-0.1,0.2-0.1,0.3c-0.4,0.5,0,1.2-0.4,1.8l0,0c-0.4,0.2-0.5,0.7-0.9,0.9 
    c-0.1,0.1-0.3,0.1-0.5,0.1c-0.5-0.5-1-0.3-1.2,0.3h0c-0.3,0.1-0.3,0.5-0.7,0.6l-0.1,0h-0.1c-0.2,0-0.6-0.3-0.5,0.3l0,0.1 
    c0,0.7-0.6,0.9-1.1,1.1c-0.2,0.1-0.4,0.2-0.7,0.3c-0.2,0.1-0.4,0-0.5-0.2c-0.3-0.5-0.6-0.8-1.2-0.9c-0.3-0.2-0.5-0.4-0.8-0.5 
    c-0.8-0.1-0.4,0.7-0.7,1c-0.1,0.4-0.5,0.5-0.8,0.6c-0.5,0.1-1,0.4-1.3,0.9c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.2-0.3,0.4-0.5,0.7 
    c-0.1,0.2-0.3,0.5-0.4,0.7c-0.1,0.1-0.1,0.1-0.2,0.2c-0.4,0.1-0.7-0.2-1.1-0.1c-0.1,0-0.2,0-0.3,0c-0.4-0.2-0.7-0.4-1.1-0.1 
    c-0.2,0.2-0.5,0.4-0.8,0.2c-0.3-0.2-0.8-0.3-1.1-0.5c-0.5-0.2-0.7,0.1-0.9,0.4c-0.1,0.1-0.1,0.1-0.2,0.2c-0.8,0.2-1.4-0.3-2-0.6 
    c-0.1-0.1-0.1-0.1-0.2-0.2c-0.2-0.3-0.1-0.8-0.7-0.9L209.6,85.3z"/>

ユーザーがクリックするたびに、私は特定の流域にシフトし、「ズームイン」するために、このパスを操作しようとしていますしかし、物事は私が予想したよりはるかに困難であることが証明されています。だから、D3を使用してSVGの特定のパスを操作することが不可能かどうか、またはD3でSVGを作成してそれを操作する必要があるかどうかは疑問です。どんな助けでも大歓迎です。

（これは私の最初のフォーラム投稿ですので、事前に貧弱な言葉遣いをお詫び申し上げます）。

出典

2016-09-01 GarrettCarrott

シフトとズーム通常の変換を使用して実装されています。選択すると、d3の既存のパスに変換を適用できます。あなたがちょうど始めているのであれば、いくつかのd3チュートリアルを読むことはこの時点で役に立つでしょう。 –

シェイプをパンとズームしたい場合は、d3を追加するだけで、既存のパスにも簡単に追加できます。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    <style></style> 
 
</head> 
 

 
<body> 
 
    <svg version="1.1" id="Basins_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256.1 128.9" style="position:absolute; top:-140px; left:-27px; opacity:0.8;" width="920" height="700" enable-background="new 0 0 256.1 128.9" 
 
    xml:space="preserve"> 
 
    <path class="st" id="ohio_3_" fill="#A1A6D0" stroke="#2D2A2B" stroke-width="0.1045" stroke-linejoin="round" stroke-miterlimit="10" d=" 
 
    M209.6,85.3l-1.8-1.4l-1.9-3.2l-0.6-3.6l1.3-3.7c0.8-0.4,1.3-1.1,1.5-1.9c0.3-0.4,0-0.8-0.2-1.1c-0.6-0.9-0.3-2-0.5-3 
 
    c-0.1-0.7,0.3-1.2,0.5-1.8c0.1-0.3,0.3-0.7,0.5-0.9c0.4-0.3,0.7-0.6,0.4-1.1c0-0.7,0.2-1.4,0.1-2.1c0-0.2,0.1-0.5,0.1-0.7 
 
    c-0.3-0.9-0.3-0.9,0.4-0.9c0.3,0.2,0.7,0.4,1.2,0.3c0.5-0.1,0.9-0.3,1.2-0.7c0.4-0.4,0.8-0.8,1.1-1.3c0.2-0.6,0.1-1.3,1-1.4 
 
    c0.1-0.1,0.2-0.1,0.3-0.1c0.4-0.3,1,0,1.3-0.5c0.2-0.2,0.5-0.3,0.7-0.2c0.8,0,1.6-0.2,2.3,0.1l0,0c0.3,0.2,0.4,0.5,0.3,0.8 
 
    c0,0.5,0.3,0.9,0.6,1.2c0.1,0.1,0.1,0.3,0.1,0.5c0.6,0.3,1.3,0.3,2,0.4h0c0.2,0.5,0.5,0.5,0.9,0.2c0.2-0.2,0.4-0.5,0.5-0.7 
 
    c0.4-0.8,1.1-0.4,1.7-0.3c0.7,0.2,0.9-0.5,1.3-0.8c0.4-0.2,1.1-0.1,0.9-0.9c0.1-0.1,0.1-0.1,0.2-0.2c0.3-0.2,0.7,0,1.1-0.2 
 
    c0.1-0.1,0.3-0.2,0.4-0.3c0.6-0.1,1-0.7,1.6-0.7c0.2,0.1,0.5,0.2,0.7,0.3c0.5,0.3,0.7,0.1,0.7-0.5c-0.1-0.4-0.1-0.8,0.3-1 
 
    c0.1,0,0.1,0,0.1,0c0.4,0.2,0.7,0,0.7-0.5c0.1-0.3,0.1-0.6,0.2-0.9c0.1-0.1,0.1-0.1,0.1-0.2c0.5-0.4,0.9-0.7,1.1-1.3v0 
 
    c0.3-0.5,0.8-0.8,1.1-1.3l0,0c0.5-0.2,0.9-0.6,1.1-1.1l0,0c0.4-0.2,0.8-0.5,1.1-0.6h0.1c0.5,0.3,1.1,0.7,1.5-0.2 
 
    c0.1-0.2,0.3-0.2,0.6-0.1l0,0c0.2,0.2,0.5,0.4,0.7,0.7l0,0c0.5,0.6,1.2,0.9,1.6,1.6c0,0.5-0.3,0.7-0.7,0.9c-0.7,0.3-0.9,0.9-1,1.6 
 
    c-0.1,0.7-0.1,1.4-0.4,2.1c-0.2,0.4,0.1,0.8,0.4,1.1c0.3,0.3,0.7,0.5,0.7,1c-0.1,1-0.7,1.9-0.6,2.9c0.1,0.5-0.3,0.8-0.6,1.1 
 
    c-0.3,0.4-0.5,0.8-0.6,1.3c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.1,0.6,0.1,0.9c-0.1,0.4-0.2,0.8-0.5,1.2c-0.3,0.9-0.7,1.8-1,2.7 
 
    c-0.1,0.4-0.4,0.7-0.5,1.1c-0.1,0.2-0.2,0.4-0.3,0.6c-0.2,0.3-0.1,0.8-0.4,1.1l0,0c-0.3,0.5,0.2,0.9,0.3,1.3c0,0.4,0.2,0.5,0.6,0.5 
 
    c0.2,0,0.5-0.1,0.4,0.3c-0.1,0.2-0.3,0.4-0.4,0.7c-0.4,0.5-0.8,1.1-1.5,1.2c-0.1,0.1-0.1,0.2-0.2,0.3c-0.3,0.3-0.4,0.8-0.9,0.9l0,0 
 
    c-0.5,0.2-0.8,0.6-1.1,1c-1,0.6-1.6,1.6-2.1,2.5c0,0.1-0.1,0.2-0.1,0.3c-0.4,0.5,0,1.2-0.4,1.8l0,0c-0.4,0.2-0.5,0.7-0.9,0.9 
 
    c-0.1,0.1-0.3,0.1-0.5,0.1c-0.5-0.5-1-0.3-1.2,0.3h0c-0.3,0.1-0.3,0.5-0.7,0.6l-0.1,0h-0.1c-0.2,0-0.6-0.3-0.5,0.3l0,0.1 
 
    c0,0.7-0.6,0.9-1.1,1.1c-0.2,0.1-0.4,0.2-0.7,0.3c-0.2,0.1-0.4,0-0.5-0.2c-0.3-0.5-0.6-0.8-1.2-0.9c-0.3-0.2-0.5-0.4-0.8-0.5 
 
    c-0.8-0.1-0.4,0.7-0.7,1c-0.1,0.4-0.5,0.5-0.8,0.6c-0.5,0.1-1,0.4-1.3,0.9c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.2-0.3,0.4-0.5,0.7 
 
    c-0.1,0.2-0.3,0.5-0.4,0.7c-0.1,0.1-0.1,0.1-0.2,0.2c-0.4,0.1-0.7-0.2-1.1-0.1c-0.1,0-0.2,0-0.3,0c-0.4-0.2-0.7-0.4-1.1-0.1 
 
    c-0.2,0.2-0.5,0.4-0.8,0.2c-0.3-0.2-0.8-0.3-1.1-0.5c-0.5-0.2-0.7,0.1-0.9,0.4c-0.1,0.1-0.1,0.1-0.2,0.2c-0.8,0.2-1.4-0.3-2-0.6 
 
    c-0.1-0.1-0.1-0.1-0.2-0.2c-0.2-0.3-0.1-0.8-0.7-0.9L209.6,85.3z"></path> 
 

 
    <script> 
 
     var svg = d3.select("svg"), 
 
     path = svg.select("path"), 
 
     width = +svg.attr("width"), 
 
     height = +svg.attr("height"); 
 

 
     var zoom = d3.zoom() 
 
     .scaleExtent([1, 40]) 
 
     .translateExtent([ 
 
      [-100, -100], 
 
      [width, height] 
 
     ]) 
 
     .on("zoom", zoomed); 
 

 
     svg.call(zoom); 
 

 
     function zoomed() { 
 
     path.attr("transform", d3.event.transform); 
 
     } 
 

 
    </script> 
 
    </svg> 
 
</body> 
 

 
</html

出典

2016-09-02 00:38:29 Mark

こんにちは、あなたのお手伝いをしていただきありがとうございます。私はパスファイルのいくつかの側面を操作する方法を理解することができましたが、これはもっと大きな助けになります。あなたはMVPです。 :) – GarrettCarrott

D3.js内の特定のSVGパスを操作する方法

答えて

関連する問題