在 Billboard.js 中更新 chart.ygrids 不会更新类答案

【问题标题】：Updating chart.ygrids in Billboard.js does not update the class在 Billboard.js 中更新 chart.ygrids 不会更新类
【发布时间】：2018-04-13 12:06:50
【问题描述】：

我想更新图表的 ygrids。它工作正常而不是一部分：它不会更新它的 css 类。

这个例子可能不是最好的展示方式，但是当我在控制台中查看时，即使消息相对于value 发生了更改，该类也不会从min-message 更改为@987654323 @ 或其他方式。

有人知道为什么会这样吗？

var chart = bb.generate({
		data: {
			columns: [
				["data1", 30, 200, 100, 400, 150, 250],
				["data2", 130, 250, 140, 200, 150, 50],
				["data3", 100, 200, 340, 300, 250, 250],
				["data4", 80, 230, 240, 100, 350, 150]
			],
			type: "bar"
		},
		grid: {
			y: {
				lines: [
					{value: 100, text: 'Label 1'}
				]
			}
		},
		transition: {
			duration: 0
		}
	});

	function toggle(remove, add) {
		setTimeout(function() {
			chart.ygrids([{
				value: remove, text: "value bigger than y max", position: "start", class: "min-message"
			}])
		}, 0);
		
		setTimeout(function() {
			chart.ygrids([{
				value: add, text: "value bigger than y max", position: "start", class: "max-message"
			}]);
		}, 100);
	}

#chart {width:400px; height:250px; }
.min-message line{
	stroke: red;
}
.min-message text{
	fill: red;
}
.max-message line{
	stroke: green;
}
.max-message text{
	fill: green;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    <title>billboard.js</title>
</head>
<body>
<div id="chart"></div>

<button onclick="toggle(100, 300)">one</button>
<button onclick="toggle(300, 100)">two</button>
</body>
</html>

【问题讨论】：

标签： javascript css d3.js billboard.js

【解决方案1】：

这是一个错误，将在https://github.com/naver/billboard.js/issues/389 处理。

暂时解决，在设置网格之前移除。

setTimeout(function() {
    // remove all current grids, before adding
    chart.ygrids.remove();

    chart.ygrids([{
                value: remove, text: "value bigger than y max",
                position: "start",
                class: "min-message"
    }])
}, 0);

【讨论】：