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

Question

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

我正在计算点击次数，以便用户可以 select 和取消 select 点击标签，但是对于一些较小的值，用户无法分辨他们在任何选项中过滤了哪些项目具体图表。

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

这会将 x 轴中的第一项加粗，无论生成哪个 selection。

当我使用 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

首先，只要有可能，我建议使用 built-in selection/filter 状态，而不是尝试自己跟踪点击次数。否则他们一定会在某个时候不同步。

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

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);
  })
})

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

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

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

同样，您可以通过绑定 built-in 过滤器行为来简化您的点击行为，该过滤器行为已经切换：

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

是的，built-in 过滤器功能切换很奇怪，但这正是 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.

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

How do I change the axis label of just the item selected in dc.js composite barChart

javascript

dc.js

复合