javascript - 如何仅更改 dc.js 复合条形图中所选项目的轴标签

Question

我试图将所选项目的轴标签设为粗体，以便用户更清楚地看到他们选择的内容。我正在使用复合条形图来比较两个值，并将标签转为 -90，以便它们位于条形图内。在 Gordon 的帮助下，我已经能够使标签可点击:dc.js barChart - click on x-axis ticks and labels

我正在计算点击次数，以便用户可以通过点击标签来选择和取消选择，但是对于一些较小的值，用户无法判断他们在任何特定图表中过滤了哪些项目。

我可以在点击时选择、取消选择，我试过 select('tick-text').attr('style', 'font-weight: bold;');

这会将 x 轴上的第一个项目加粗，无论做出哪个选择。

当我使用 selectAll('.x text) 时，它会改变所有。

代码的相关部分:

        ByTopLvl.on('pretransition',function() {                            
             ByTopLvl.selectAll('g.x text')
             .style('text-anchor', 'start')                                
             .attr('transform', 'rotate(-90),translate(10, -10)'); 

        ByTopLvl.select('.axis.x')
             .selectAll('.tick text')                                
             .on('click.custom', function (d) {
                  var clicks = $(this).data('clicks');
                  if (!clicks) {                                        
                       ByTopLvl.replaceFilter(d)                                           
                       .select('.tick text')
                       .attr('style', 'font-weight: bold;');

                       ByTopLvl.redrawGroup();
              } else {
                       ByTopLvl.select('.tick text')
                       .attr('style', 'font-weight: normal;');

                       ByTopLvl.filterAll();
                       dc.redrawAll();
         }

         $(this).data("clicks", !clicks);
      });

我希望当我点击标签时，只有被点击的标签是粗体。

Answer 1

首先，只要有可能，我建议使用内置的选择/过滤器状态，而不是尝试自己跟踪点击。否则它们必然会在某个时候不同步。

如果您有由事件过滤器驱动的粗体刻度，那么无论单击条形图还是单击刻度，您都会得到相同的行为，并且您可以确定过滤器中的刻度正是粗体:

CSS

.dc-chart g.axis.x text.selected {
  font-weight: bold;
}

JS

chart.on('filtered', function(chart) {
  var filters = chart.filters();
  chart.selectAll('.axis.x .tick text').classed('selected', function(d) {
    return filters.includes(d);
  })
})

[旁注，因为我没有回答你的确切问题:如果你想让你的代码工作，你可以做一些事情，比如根据 d 过滤选择:

ByTopLvl.select('.tick text').filter(function(d2) { return d2 === d; })

或者在您的情况下，this 是点击的勾号，因此 d3.select(this) 也应该有效。但我认为那样你会遇到很多错误。]

同样，您可以通过绑定(bind)到已经切换的内置过滤器行为来简化您的点击行为:

chart.on('pretransition', function(chart) {
  chart.select('.axis.x')
      .selectAll('.tick text')
      .on('click.select', function(d) {
          chart.filter(d); 
          chart.redrawGroup();
      });
});

是的，内置过滤器功能切换很奇怪，但这正是 dc.js 发展的方式。

Here's a demo fiddle.

在复合中

dc.js 中的综合图表有点困惑。

过滤器选择在父子之间共享，除了它们排序也分别处理它。

不幸的是，当我必须对复合图表进行故障排除时，我只是尝试不同的方法直到它起作用，而从未完全理解发生了什么。我认为这对我的大脑来说太复杂了。 :-O

无论如何，这有效......

保留对内部条形图的引用:

var chart = dc.compositeChart('#test'), bar;
  chart
      .width(768)
      .height(380)
      .x(d3.scaleBand())
      .xUnits(dc.units.ordinal)
      .brushOn(false)
      .xAxisLabel('Fruit')
      .yAxisLabel('Quantity Sold')
      .dimension(fruitDimension)
      .group(sumGroup)
      ._rangeBandPadding(0.05)
      .compose([
      bar = dc.barChart(chart)
          .barPadding(0.1)
          .outerPadding(0.05)
      ])

响应点击时，过滤子条形图而不是父:

chart.on('pretransition', function(chart) {
  chart.select('.axis.x')
      .selectAll('.tick text')
      .on('click.select', function(d) {
          bar.filter(d); 
          chart.redrawGroup();
      });
});

监听子条形图的filtered事件并将轴粗体应用于父复合图:

bar.on('filtered', function(chart) {
  var filters = chart.filters();
  chart.selectAll('.axis.x .tick text').classed('selected', function(d) {
    return filters.includes(d);
  })
})

哇哦。我想这有点……一致？子条形图是过滤器的真实来源。也许我在合理化。

New fiddle version.