d3js：爲什麼不先用退出方法消失吧？

我正在創建一個簡單的條形圖並試圖使其響應用戶點擊。被點擊的欄應該消失。所有似乎都在工作，除了點擊第一個酒吧，最終酒吧消失。我完全不知道爲什麼會出現這種情況，非常感謝任何幫助。d3js：爲什麼不先用退出方法消失吧？

上Plunkr完整代碼：

https://plnkr.co/edit/H8K0ISdhGrb5HirrX2MG?p=preview

我所說的更新功能，當用戶點擊一個欄上。我創建了一個removefromarray函數來返回數據對象減去綁定到單擊欄的數據。：

d3.tsv("CantTouchThis.tsv",function(d,i){ 
d.FieldGoals = +d.FieldGoals; 
return d; 

}, function(error,data){ 
if (error) throw error; 
y.domain([0,d3.max(data, function(d){return d.FieldGoals})]); 
x.domain(data.map(function(d){return d.Player}));data used as the x attribute 

function update(indx){ 

var selection = g.selectAll(".bars") 
    .data(data.removefromarray(indx), function(d){console.log('d');console.log(d); return d}) //printing d shows the previous bars and new bars are being returned, I suspect this may be causing the problem, but not sure 

selection.enter().append("rect") 
    .attr("class","bars") 
    .attr("width",function(d){return x.bandwidth()}) 
    .attr("x",function(d){return x(d.Player)}) 
    .attr("height",function(d){return height - y(d.FieldGoals)}) 
    .attr("y",function(d){return y(d.FieldGoals)}) 
    .on("click",function(d,i){update(i);}); 

console.log(selection.enter()) 

console.log(selection.exit()) 

selection.exit().remove() 

}

來源

2016-12-28 st4rgut

你想要點擊的欄被刪除或不可見？「消失」似乎非常大 – Dummy

解決方案1：你缺少一個「更新」的選擇：

selection.attr("width",function(d){return x.bandwidth()}) 
    .attr("x",function(d){return x(d.Player)}) 
    .attr("height",function(d){return height - y(d.FieldGoals)}) 
    .attr("y",function(d){return y(d.FieldGoals)}) 
    .on("click",function(d,i){update(i);});

這是你更新plunker：https://plnkr.co/edit/qJY5KgY9FBvuJ8krddYm?p=preview

解決方案2：另一種非常簡單的解決方案（即正確地址你的問題，「爲什麼不用第一個bar消失使用退出方法？」）：在數據綁定選擇中使用正確的鍵：

var selection = g.selectAll(".bars") 
    .data(data.removefromarray(indx), function(d){ return d.Player}); 
    //     this is the proper key function ---^

但是，請記住，此「解決方案」不適用於所有點擊。發生這種情況是因爲您的刪除數據對象的方法（在擴展原型中使用拼接）是而不是正常工作。

這裏是另一個更新plunker：https://plnkr.co/edit/rVTinxx45nmBvFiWwqgg?p=preview

PS：有辦法更簡單的方法做你想做的（和更充足的D3代碼也）。

來源

2016-12-29 00:08:51

謝謝！請糾正我，如果我錯了，但我想澄清與我的代碼的問題是，第一個欄存儲在更新選擇 - 這是不存在的 - 因此，不能被刪除 – st4rgut

它更多一點複雜。當我們使用更新選擇時，我們保證所有的小節將被正確地重新定位。但忘記這一點，試着關注第二種解決方案：當我們正確地將數據與元素相關聯時，我們可以操縱數據知道「什麼」元素將要改變。但是，正如我所說的，您的方法根據點擊更改數據存在問題。 –

d3js：爲什麼不先用退出方法消失吧？

回答

相關問題