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

我试图将选中项目的轴标签设置为粗体，以便用户更清楚地看到他们选择了什么。我使用一个复合条形图来比较两个值，并将标签改为-90，使它们位于条形图内。在Gordon的帮助下，我可以点击标签：

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

我可以在单击时选择、取消选择，我尝试过选择（'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);
      });

---

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

首先，如果可能的话，我建议使用内置的选择/筛选状态，而不是自己跟踪点击。否则，它们一定会在某个时刻失去同步

如果您具有由活动过滤器驱动的标记的粗体，那么无论单击了条还是标记，您都将获得相同的行为，并且您可以确定过滤器中的标记确实是粗体的：

CSS

JS

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

d

过滤选择：

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

或者在您的情况下，

这个

是单击的勾号，因此

d3。选择（这个）

也应该可以。但是我认为这样会遇到很多错误。]

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

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

是的，内置的过滤函数切换很奇怪，但这正是dc.js发展的方式

在合成中 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)
      ])

响应单击时，过滤子条形图而不是父条形图：

收听子条形图的

过滤
事件，并将轴粗体应用于父合成图：

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

您好，您没有使用select上的元素（您没有使用d）。选择将获取第一个元素（第一个勾号）。我不确定d到底是什么，但你需要在你的选择中使用它。这正是我所希望的行为。我对计算点击次数并不感到兴奋，但对切换行为感到兴奋。非常感谢你，戈登！你“教鱼”的态度非常有帮助，教会了我很多。谢谢你的好话。在过去的几年里，我从帮助别人中学到了很多。提供一点背景和背景可以让一个人的答案变成数百人的答案，这很好。嘿，戈登。对将此应用于合成图有何建议？我使用的是由两个条形图组成的复合图。起初我认为它会起作用，因为我可以让它加粗文本，但它不会切换过滤选择。嗯。嗯，不太漂亮，但我让它工作了-上面的新部分。让它工作了！再次感谢你。如果是那样的话，我会在轴上缠上好几天，永远不会想出你的解决方案……太棒了！
chart.on('pretransition', function(chart) {
  chart.select('.axis.x')
      .selectAll('.tick text')
      .on('click.select', function(d) {
          chart.filter(d); 
          chart.redrawGroup();
      });
});

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

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