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)也应该起作用。但是我认为这样会遇到很多错误。]

类似地，您可以通过绑定内置的过滤器行为来简化点击行为，该行为已经进行了切换：

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

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

New fiddle version.

如何更改仅在dc.js复合barChart中选择的项目的轴标签

1 个答案:

在复合物中