D3複合キー機能

Question

複合キー機能を使用してデータを結合することはできますか？私は、2人の従業員のランクを交換し、出口選択とエントリー選択の両方に含めることで結果を再結合するように、名前とランクのコンポジットを使用してランク付けされた従業員オブジェクトに参加したいと思います。私が試した： 最初の質問については

var myData = [{"Rank":1,"Team Member":"John Smag","Ships":48},{"Rank":2,"Team Member":"Leslie Kwarki","Ships":46},{"Rank":3,"Team Member":"Jasmine Doublet","Ships":32}]; 
 

 
function log(selection, action) { 
 
    console.log(action, selection[0].length); 
 
} 
 
function join() { 
 
    var selection = d3.select('body').selectAll('p').data(myData, function(d) { 
 
    \t return d['Team Member'] + d['Rank']; 
 
    }); 
 
    selection.each(function(d) { 
 
    console.log('updating', d); 
 
    }); 
 
    selection.enter().append('p').text(function(d) { 
 
    return d['Ships']; 
 
    }).each(function(d) { 
 
    console.log('entering', d); 
 
    }); 
 
    selection.exit().remove().each(function(d) { 
 
    console.log('exiting', d); 
 
    }); 
 
} 
 

 
join(); 
 
var temp = myData[1]['Rank']; 
 
myData[1]['Rank'] = myData[2]['Rank']; 
 
myData[2]['Rank'] = temp; 
 
join();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

複合キー機能が機能しますが、これは問題ではありません。

joinを再度呼び出す前に、データ配列を変更するという問題があります。このデモを見て、オブジェクト全体が変更された場合、あなたは「入る」ことがわかります、「更新」と期待どおり「出口」の選択が働く：

var myData = [{ 
 
    "Rank": 1, 
 
    "Team Member": "John Smag", 
 
    "Ships": 48 
 
}, { 
 
    "Rank": 2, 
 
    "Team Member": "Leslie Kwarki", 
 
    "Ships": 46 
 
}, { 
 
    "Rank": 3, 
 
    "Team Member": "Jasmine Doublet", 
 
    "Ships": 32 
 
}]; 
 

 
function log(selection, action) { 
 
    console.log(action, selection[0].length); 
 
} 
 

 
function join() { 
 
    var selection = d3.select('body').selectAll('p').data(myData, function(d) { 
 
    return d['Team Member'] + d['Rank']; 
 
    }); 
 
    selection.each(function(d) { 
 
    console.log('updating', d); 
 
    }); 
 
    selection.enter().append('p').text(function(d) { 
 
    return d['Ships']; 
 
    }).each(function(d) { 
 
    console.log('entering', d); 
 
    }); 
 
    selection.exit().remove().each(function(d) { 
 
    console.log('exiting', d); 
 
    }); 
 
} 
 

 
join(); 
 
var temp = myData[1]; 
 
myData[1] = { 
 
    "Rank": 3, 
 
    "Team Member": "Leslie Kwarki", 
 
    "Ships": 46 
 
}; 
 
myData[2] = { 
 
    "Rank": 2, 
 
    "Team Member": "Jasmine Doublet", 
 
    "Ships": 32 
 
}; 
 
join();

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

、それは複合キー機能とデータを結合することは可能ですか？はい。あなたはそれをやっている。

第2の質問については、入力選択と終了選択の両方に要素を含めることはできません。エンター選択は、存在しないために追加する必要がある要素に対するものです。出口選択は、存在するものの、もはやデータと一致しないもののためのものです。 d3では、これらのセットは排他的です。なぜあなたのニーズを満たしていないのかわかりません。