8、数据可视化中的用户界面元素创建

数据可视化中的用户界面元素创建

在数据可视化设计中，屏幕空间是稀缺资源，我们需要在不使屏幕杂乱的前提下充分利用每一个像素。为了解决这个问题，我们可以添加上下文用户界面元素，如工具提示（tooltip），它能在不影响整体可视化的情况下显示额外信息。此外，当页面元素过多时，突出重要元素可以引导用户的注意力。本文将介绍如何突出图表元素、创建可复用的工具提示，以及创建带有刷选（brushing）控制的图表。

1. 颜色选择器与滑块组件

在之前的内容中，我们使用滑块组件创建了一个颜色选择器。当用户选择颜色时，示例页面的背景颜色会发生改变。颜色选择器由选择器和颜色选择窗口两个独立组件组成。用户点击颜色选择器选择器时会创建颜色选择窗口实例，再次点击则移除窗口容器。

以下是相关代码示例：

// Change the background color of the page
d3.select('body').style('background-color', d);
});
// Create a group for the color picker and translate it.
var grp = svg.append('g')
    .attr('transform', 'translate(30, 30)')
    .call(picker);

2. 突出显示图表元素

我们将创建一个简单的图表，用一系列圆圈表示水果以及每 100 克每种水果所含的卡路里数。为了方便，我们创建了一个包含水果信息的 JSON 文件，其结构如下：