Question

我对D3非常陌生，所以如果这是一个愚蠢的问题我会事先道歉。我在我的HTML文档中有一组在美国各地形成水盆的路径，我试图在点击它们时放大并移动特定路径。 SVG本身是由我的客户提供给我的，并不是使用D3创建的。

以下是俄亥俄河流域的路径示例：

<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才能使用它？任何帮助都感激不尽。

（另外，这是我的第一个论坛帖子，所以我提前为不良措辞道歉。）

Answer 1

如果您只想平移和缩放形状，d3可以非常简单地添加它（甚至是现有路径）。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script data-require="d3@4.0.0" 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

如何在D3.js中操作特定的SVG路径

1 个答案: