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方括號（[...]）

回答

相關問題