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

在D3创建路径涉及方法的调用序列是这样的：D3路径：为什么在使用的.data方括号（[...]）

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中获得。

来源

2016-12-29 Argent

我猜是因为它期望一个数组数组。 –

@ davenewton的留言已关闭。简单的回答是，d3.line需要一个数组。通过传递一组数组到.datad3的数据绑定将调用.attr与数组阵列中的第一个数组。

检查此代码：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

这是一个奇怪的使用数据绑定，因为它不符合enter，update，exit我们通常使用数据绑定（这就是为什么只有绑定get的第一次迭代调用）。

最后，应该指出的是，这个代码可以写成：

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))

都是等价的。

来源

2016-12-29 14:07:29 Mark

你是说当体内有多个div（或任何）时，可以生成多个路径，每个div有一个？这就是为什么要部署一个数组的数组？ – Argent

@Argent，no，写入'.append（...）。data（...）。attr（...）'的方式，它只会追加，然后迭代数组中的第一个参数。如果你想添加多个项目，你需要遵循传统的*使用de数据绑定，'.selectAll（...）。data（...）。enter（...）。append（ ...）' – Mark

@Argent，mbostock实际上只是在'.data'调用中使用了一种巧妙的方法。我不知道他为什么会这样写（我不会）。我以另一种方式更新了我的答案，您可以实现将'points'传递给线函数的相同结果。 – Mark

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

回答

相关问题