如何將圖例添加到 react + d3 分組和堆疊條形圖？

Question

我創建了一個帶有 react + d3 的堆疊和分組條形圖，我想添加圖例，我已將其添加為：

 {allKeys.map((key) => ( <div key={key} className="field" style={{ display: "flex" }}> <input id={key} type="checkbox" checked={keys.includes(key)} onChange={(e) => { if (e.target.checked) { setKeys(Array.from(new Set([...keys, key]))); } else { setKeys(keys.filter((_key) => _key !== key)); } }} /> <label htmlFor={key} style={{ color: colors[key] }}> {key} </label> </div> ))}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但問題是當你切換時（例如點擊 facebook 切換）它會改變堆棧順序（例如 facebook 顏色是綠色的，它應該總是在底部，但是當你點擊 facebook 圖例時，它會消失和再次單擊以首先出現它在底部，當您隱藏並顯示時它會轉到頂部）

您可以在演示中查看完整代碼和演示

任何幫助使它工作將不勝感激

Answer 1

兩種可能的解決方案：

1. 使用對象而不是數組，鍵是標簽，值是是否切換：

const initialItems = {
  facebook: true,
  google: true,
  linkedin: true
}

{Object.keys(items).map((key) => (
  <div key={key} className="field" style={{ display: "flex" }}>
    <input
      id={key}
      type="checkbox"
      checked={items[key]}
      onChange={(e) => {
        if (e.target.checked) {
          items[key] = true;
        } else {
          items[key] = false;
        }
        setItems(items);
      }}
    />
    <label htmlFor={key} style={{ color: colors[key] }}>
      {key}
    </label>
  </div>
))}

2. 更改set函數以使用allKeys作為基礎：

if (e.target.checked) {
  setKeys(allKeys.filter(k => keys.includes(k) || k === key));
}