チェックボックスをオフにします。

Question

私はJavascript D3で棒グラフを作成しています。チェックボックスをオンにしたときにデータを並べ替える場合、チェックボックスをオフにすると、ビジュアライゼーションはソートされていない状態に戻ります。
"チェックボックスをオンにしたときのデータの並べ替え"はうまくいきますが、チェックボックスのチェックを外すと違いはありません。どんな助けもありがとうございます。前もって感謝します！

コードスニペット：

<form> 
    <label><input type="checkbox" id="check" onchange="sortData(this);" value="sort">Sort Data</label> 
</form> 

<script> 
var data; 
function sortData(cb) { 
    if (cb.checked) { 
    // sort data 
    var checkedData = data; 
    checkedData.sort((a, b) => d3.descending(a[myCategory], b[myCategory])); 
    drawVis(checkedData); 
    } else { 
    // do not sort data 
    console.log("Unchecked!"); 
    drawVis(data); 
    } 
} 

function drawVis(data) { 
    svg.selectAll(".bar").remove(); 
    svg.selectAll("g").remove(); 
    ...... 
    svg.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    svg.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(y)); 

    svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect"); 
    ...... 
} 
</script> 

Answer 1

問題はここにあなたがこの行に data配列をクローニングしている考える という事実に関係してい

：しかし

var checkedData = data; 

を、あなたそうではありません。したがって、後で行うとき：

drawVis(data); 

このdataアレイは並べ替えられた配列です。

つまり、checkedDataはdataを指しているだけで、別の配列ではありません。従って、あなたがそれらのうちの1つで行った変更は、他を変更します。

これを実行中のスニペットで表示しましょう。私はfakeCopyをソートしますが、dataも変化：

var data = [3, 5, 7, 6, 2, 9, 0, 1, 4, 8]; 
 
var fakeCopy = data; 
 
fakeCopy.sort(); 
 
console.log(data);

ソリューションは：本当にあなたのdata配列のクローンを作成するには、次の操作を行います。

var checkedData = JSON.parse(JSON.stringify(data)); 

そのように、何でもあなたをcheckedDataで行う場合は、dataを変更しないでください。

PS：配列をJSON.parse(JSON.stringify(foo))でクローン化するこのソリューションは、日付があると機能しません。その場合、「JavaScript deep copy」を検索するだけで、いくつかの異なるアプローチを見つけることができます。