Question

我正在与Biilboard.js合作，这是一个基于D3的图书馆。

我创建了一个图表，我希望能够在其上显示一条消息，例如，如果Y轴大于100或类似的东西，那么这个条件并不重要。

这是我想要用纯D3做的事情的一个例子（我猜）：

基本上，如果满足该条件，则该消息框将显示在图表上方。

你有什么想法吗？

Answer 1

有几种方法可以做到这一点。

1）添加y轴网格文本
2）简单地说，添加一些普通的DOM元素（例如div等）并处理它以定位在图表元素上

我会尝试使用第一个示例并检查ygrids() API文档。

// variable to hold min and max value
var min;
var max;

var chart = bb.generate({
	data: {
		columns: [
			["sample", 30, 200, 100, 400, 150, 250]
		],
		onmin: function(data) {
			min = data[0].value;
		},
		onmax: function(data) {
			max = data[0].value;
		}
	}
});

// add y grids with deterimined css classes to style texts added
chart.ygrids([
	{value: min, text: "Value is smaller than Y max", position: "start", class: "min"},
	{value: max, text: "Value is greater than Y max", position: "start", class: "max"}
]);

/* to hide grid line */
.min line, .max line{
    display:none;
}

/* text styling */
.min text, .max text{
    font-size:20px;
    transform: translateX(10px);
}

<!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>
</body>
</html>

是否可以在Billboard.js的图表上显示消息文本？

1 个答案: