Select 要在 dc.js 条形图中显示的图例名称

Question

我正在制作 dc.js 条形图，我有以下维度：

const barDimension = ndx.dimension((d) => [d.variable1, d.variable2]);

在图表中，我想只显示第一个变量作为标签，但目前图表显示的是逗号分隔的两个变量。

chart
  .dimension(barDimension)
  .group(barGroup)
  .renderTitle(false)
  .width(width)
  .height(350)
  .margins({
    top: 30,
    right: 12,
    bottom: 80,
    left: 40,
  })
  .x(d3.scaleBand())
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .transitionDuration(0)
  .barPadding(0.4)
  .outerPadding(0.2)
  .ordering((d) => {
    // custom order function
    return -1;
  })
  .colorAccessor((d) => d)
  .colors((d) => this.getColor(d.key, data));

这是图表定义，我尝试使用 chart.legendables 函数但似乎不起作用。
图表变量是 dc.BarChart 对象。

编辑我想更改的不是顶部的标签，而是图表底部的标签，请参见屏幕截图。

Answer 1

您可以在 dc.js 图表上使用 label accessor。

您需要在每种情况下检查 d 的类型并相应地编写您的访问器。

我看不到你的图表使用的数据，所以无法完美回答。但以下代码可能对您有所帮助：

.label(function(d) { return d.key.split(',')[0]; })

chart
  .dimension(barDimension)
  .group(barGroup)
  .renderTitle(false)
  .width(width)
  .height(350)
  .margins({
    top: 30,
    right: 12,
    bottom: 80,
    left: 40,
  })
  .x(d3.scaleBand())
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .transitionDuration(0)
  .barPadding(0.4)
  .outerPadding(0.2)
  .ordering((d) => {
    // custom order function
    return -1;
  })
  .colorAccessor((d) => d)
  .colors((d) => this.getColor(d.key, data));
  .label(function(d) { return d.key.split(',')[0]; })

条形图标签旋转的解决方案

您可以简单地使用 CSS 旋转 x 轴标签。

#chartContainterId .x.axis text {
    text-anchor: end !important;
    transform: rotate(-45deg);
}

Answer 2

一般问题是"what are all the labels on a chart and how do I change them?"

这里是一般答案，以防对其他人有所帮助。

我也放了这个信息on the wiki。

要更改轴标签，请先使用 .xAxis() or .yAxis(). Then use .tickFormat() or other d3-axis methods to change the text. Be sure to do this in a separate statement 获取轴对象，否则可能会发生混淆。

Select 要在 dc.js 条形图中显示的图例名称

Select legend name to display in dc.js barchart

javascript

dc.js