訪問d3.js中的數組元素

我希望用戶能夠在SVG畫布上繪製一條線。首先，顯示由1px×1px矩形組成的「粗糙路徑」，然後當用戶釋放鼠標時，他追蹤的線被轉換爲SVG <path>。這是創建矩形代碼：訪問d3.js中的數組元素

var svg = d3.select('#svg-overlay'); //SVG Canvas 
var roughPath = []; 
(...) 
var tx = Math.round(e.pageX - offset.left); 
var ty = Math.round(e.pageY - offset.top); 

roughPath.push(svg.append('rect') 
    .attr('width', 1) 
    .attr('height', 1) 
    .attr('x', tx) 
    .attr('y', ty) 
    .attr('fill', 'white'));

的路徑已經制定並轉化爲<path>，我希望能夠刪除存儲在roughPath在所有的矩形後。但是，我無法弄清楚如何到達該數組內的元素。 d3.select(roughPath)沒有工作，d3.select(roughPath).selectAll('rect')，也沒有roughPath.forEach(...)。有人可以提出一個建議，告訴我如何達到存儲在數組中的d3元素，或者至少我可以如何移除roughPath內的所有元素？

來源

2013-10-17 sg.cc

一般而言，您不需要在自己的結構中保留其他對選擇的引用（例如您的roughPath數組）。相反，將DOM看作是可以使用選擇器查詢的節點集合（在您的情況下爲rects）。

如果你添加一個類你你粗糙的路徑上創建節點，你可以用它來查詢該組節點：

svg.append('rect') 
    .attr('class', 'roughpath') 
    .attr('width', 1) 
    .attr('height', 1) 
    .attr('x', tx) 
    .attr('y', ty) 
    .attr('fill', 'white');

以後，當您想刪除，你可以簡單地做的節點：

svg.selectAll('rect.roughpath').remove();

來源

2013-10-17 23:45:46

謝謝Scott！我原本也想這樣做，但是，習慣於C++和指針，我認爲「正確」的方式是將這些數組當作指針數組，並從那裏完成我所有的工作。很高興聽到這是不錯的風格與class/id :) –

斯科特的回答是做你所嘗試的最習慣的方式。如果你真的想將參考文件存儲在數組中，刪除它們很簡單：

roughPath.forEach(function(d){ d.remove(); })

來源

2013-10-17 23:48:47

訪問d3.js中的數組元素

回答

相關問題