DC.js-图例

DC.js是一款基于D3.js的数据可视化工具库，封装了大量的坐标轴、图表和交互组件，并提供了包括数据聚合、过滤、排序等在内的数据处理功能，使得开发者能够快速地创建出交互式的数据可视化界面。

图例组件

DC.js提供了图例组件（legend）来展示各种数据序列的说明信息，支持多种布局方式和自定义处理逻辑，从而可以帮助开发者更好地呈现数据的含义和差别。

布局方式

DC.js提供了两种常见的图例布局方式：水平布局和垂直布局。水平布局通过horizontal()函数实现，垂直布局通过vertical()函数实现。另外还可以通过gap()函数设置各个图例项之间的间距。

// 水平布局
chart.legend(dc.legend().horizontal().gap(10));
// 垂直布局
chart.legend(dc.legend().vertical().gap(10));

自定义处理逻辑

DC.js允许开发者通过自定义函数处理图例组件的数据和展示方式。比如可以通过itemHeight()函数设置每个图例项的高度，或者通过highlightSelected()函数设置当选中某个项时的高亮效果。

// 设置图例项高度
chart.legend(dc.legend().itemHeight(20));
// 设置选中项高亮效果
chart.legend(dc.legend().highlightSelected(true));

示例代码

// 创建图表对象
var chart = dc.lineChart("#chart");

// 设置数据源
d3.csv("data.csv", function(error, data) {
  data.forEach(function(d) {
    d.date = new Date(d.date);
    d.value = +d.value;
  });

  // 创建维度对象和组对象
  var ndx = crossfilter(data),
      dateDim = ndx.dimension(function(d) { return d.date; }),
      valueGroup = dateDim.group().reduceSum(function(d) { return d.value; });

  // 添加线图
  chart.width(600)
       .height(300)
       .dimension(dateDim)
       .group(valueGroup)
       .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; })))
       .legend(dc.legend().horizontal().gap(10)); // 添加图例并使用水平布局和10像素间隔
  // 渲染图表
  dc.renderAll();
});

以上代码演示了如何在线图中添加图例组件并设置水平布局和一定的间隔。另外需要注意的是，DC.js中的时间维度数据需要先转换为JavaScript的Date对象，才能正确地进行可视化处理。