如何在导入的SVG上使用d3.js Fisheye

现在，我成功地导入了一个SVG，我想在其上添加鱼眼效果。我想做一些类似的事情。我已经看过这里使用的代码，它看起来像：

var path = svg.selectAll("path")
    .attr("d", line);

svg.on("mousemove", function() {
  fisheye.center(d3.mouse(this));
  path.attr("d", function(d) { return line(d.map(fisheye)); });
});

然而，我没有像他们那样使用线条，但我确实有他们那样的路径。老实说，我不太清楚为什么他们在这段代码中使用d3.line。但我现在得到的是：

  d3.xml('log.svg')
    .then(data => {

      d3.select('body').node().append(data.documentElement)

      var fisheye = d3.fisheye.circular()
        .radius(200)
        .distortion(2);

      var svg = d3.select("body").select("svg g")
      var path = svg.selectAll("path")
        .attr("d");

      svg.on("mousemove", function() {
        fisheye.focus(d3.mouse(this));
        path.attr("d", function(d) {
          return (d.map(fisheye)) // Not sure about this part yet.
        });

      });

    });

控制台显示以下错误：

---

未捕获类型错误：path.attr不是函数

---

这发生在这一行：

path.attr("d", function(d) {
          return (d.map(fisheye)) // Not sure about this part yet.
        });

有人知道为什么会出现这样的错误吗？它与工作版本没有太大区别，是吗？

您必须更改：

var path = svg.selectAll("path")
    .attr("d");

到

（还请注意，您有时用分号结束语句，有时不使用分号）

---

这个错误的原因很重要，因为它是d3.js中经常使用的重要代码设计

要设置对象的属性/属性/行为，不能直接设置它们。相反，您调用一个函数来设置它们，这样内部逻辑就可以避免副作用

这些setter函数通常还做两件事：

它们也是getter函数，返回相应的值

当用作setter函数时，它们会将要为其设置值的对象返回属性

第二个项目符号允许您使用优雅的方法链接：

因此，如果要在对象上设置三个属性，则无需编写

let obj = *object*;
obj.method1(‘a’);
obj.method2(‘b’);
obj.method3(‘c’);

或

你可以改为写：

let obj = *object*.method1(‘a’).method2(‘b’).method3(‘c’);

在选择时，由于设置了许多属性，您通常不会应用此方法链接

正如我提到的，为了方便起见，相同的方法可以用作getter函数：

// calling method without argument returns its value
obj.method1(); // returns ‚a‘ !! not the obj!!

    var path = svg.selectAll("path")
      .attr("d", „*your path string*“);

这意味着在应用getter函数后，您不能再进行方法链接，因为“a”没有method2等

对于选择，除了方法selection.attr（）或selection.style（）根据第二个参数决定成为setter/getter之外，同样的代码设计也适用

回到你的例子：

var path = svg.selectAll("path")
      .attr("d");

是getter函数，返回已（或尚未）分配给元素“d”属性的字符串

相反：

 var path = svg.selectAll("path");

返回所有路径的选择，因此 设定器功能：

// calling method without argument returns its value
obj.method1(); // returns ‚a‘ !! not the obj!!

    var path = svg.selectAll("path")
      .attr("d", „*your path string*“);

请注意，您在fisheye示例中看到的使用getter、setter和方法链接实现此代码设计：

fisheye.center = function(_) {
  if (!arguments.length) return center;
  center = _;
  return fisheye;
};

return rescale();

另请参见可重用代码，他在其中解释了此代码设计。

您必须更改：

var path = svg.selectAll("path")
    .attr("d");

到

（还请注意，您有时用分号结束语句，有时不使用分号）

---

这个错误的原因很重要，因为它是d3.js中经常使用的重要代码设计

要设置对象的属性/属性/行为，不能直接设置它们。相反，您调用一个函数来设置它们，这样内部逻辑就可以避免副作用

这些setter函数通常还做两件事：

它们也是getter函数，返回相应的值

当用作setter函数时，它们会将要为其设置值的对象返回属性

第二个项目符号允许您使用优雅的方法链接：

因此，如果要在对象上设置三个属性，则无需编写

let obj = *object*;
obj.method1(‘a’);
obj.method2(‘b’);
obj.method3(‘c’);

或

你可以改为写：

let obj = *object*.method1(‘a’).method2(‘b’).method3(‘c’);

在选择时，由于设置了许多属性，您通常不会应用此方法链接

正如我提到的，为了方便起见，相同的方法可以用作getter函数：

// calling method without argument returns its value
obj.method1(); // returns ‚a‘ !! not the obj!!

    var path = svg.selectAll("path")
      .attr("d", „*your path string*“);

这意味着在应用getter函数后，您不能再进行方法链接，因为“a”没有method2等

对于选择，除了方法selection.attr（）或selection.style（）根据第二个参数决定成为setter/getter之外，同样的代码设计也适用

回到你的例子：

var path = svg.selectAll("path")
      .attr("d");

是getter函数，返回已（或尚未）分配给元素“d”属性的字符串

相反：

 var path = svg.selectAll("path");

返回所有路径的选择，因此 设定器功能：

// calling method without argument returns its value
obj.method1(); // returns ‚a‘ !! not the obj!!

    var path = svg.selectAll("path")
      .attr("d", „*your path string*“);

请注意，您在fisheye示例中看到的使用getter、setter和方法链接实现此代码设计：

fisheye.center = function(_) {
  if (!arguments.length) return center;
  center = _;
  return fisheye;
};

return rescale();

---

另请参见关于可重用代码的部分，其中他解释了此代码设计。

circular不是Fisheye的成员当您声明路径时，请删除行.attr（'d'）；circular不是Fisheye的成员当您声明path时，删除行.attr（'d'）；非常感谢。这让我对自己正在做的事情有了更多的了解。现在挑战开始改变路径数据，因为当我做

path.attr（“d”，函数（d）{return（d.map（fisheye））//还不确定这个部分。}）它告诉我d是未定义的，这可能与我在svg的承诺中工作有关吗？回调函数中的d指的是加入到选择中的数据。要使用“d”，您必须将数据附加到路径元素或其父元素的选择中。我在你的代码中看不到这一点——这就是为什么d是未定义的。将数据附加到选择是d3.js中的一个核心概念——它被称为数据连接——你应该用谷歌搜索它。它通常看起来像：selection.data（…）.enter（…）.append（…）。就像数据连接的原始鱼眼示例一样！好的，谢谢，我知道这一点，但我预期，由于路径数据已经存在于SVG中，它将转换为选择。根据需要，您可能不需要数据联接。您也可以删除.node（）部分，因为您希望附加到选择而不是元素。谢谢！这让我对自己正在做的事情有了更多的了解。现在，挑战开始改变现状