Question

在d3中创建路径涉及一系列方法调用，如下所示：

var path = svg.append("path")
        .data([points])
        .attr("d", d3.svg.line()
        .tension(0) // Catmull–Rom
        .interpolate("cardinal-closed"));

以上摘录如下：

https://bl.ocks.org/mbostock/1705868

鉴于points本身就是一个数组，为什么有必要在方法调用.data([points])中将点括在方括号内呢？

我相信这个内方括号要求在d3 v3和v4中获得。

Answer 1

@ davenewton的评论很接近。简单的答案是d3.line期望一个数组。通过将数组数组传递给.data d3，数据绑定将使用该数组数组中的第一个数组调用.attr。

检查此代码：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
      d3.select('body')
        .append('div')
        .data([1,2,3])
        .attr('d', function(d, i){ 
          console.log(d, i); 
        });
    </script>
  </body>

</html>

＆＃13;

这是对数据绑定的一种奇怪用法，因为它不能满足我们通常用于数据绑定的enter，update，exit（以及＆＃ 39;为什么只有第一次迭代的绑定被调用）。

最后，应该注意这段代码可以写成：

var path = svg.append("path")
    .datum(points)
    .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed"));

甚至：

var path = svg.append("path")
    .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed")(points));

自：

.append("path")
.data([array])
.attr("d", line)

和

.append("path")
.datum(array)
.attr("d", line)

和

.append("path")
.attr("d", line(points))

都是等价的。

d3路径：为什么在.data（[...]）中使用方括号

1 个答案: