如何解决如何将图例添加到React + D3分组和堆叠的条形图中?
我创建了一个带有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图例进行制作时它消失并再次单击以首先显示在底部,而当您隐藏并显示时,它将显示在顶部)
您可以在demo
中查看完整的代码和演示任何使它起作用的帮助将受到赞赏
解决方法
两种可能的解决方案:
- 使用对象而不是数组,键是标签,值是是否切换:
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>
))}
- 将
set
函数更改为以allKeys
为基础:
if (e.target.checked) {
setKeys(allKeys.filter(k => keys.includes(k) || k === key));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。