C3.js 水平条形图 - 与条形一起突出显示特定的 x 轴刻度

Question

我使用 C3.js 创建了一个非常简单的水平条形图，其中列出了我的 SQL 数据库中的数据。 该图表可以在没有任何过滤器的情况下自行访问，也可以通过使用 $_GET 从以前访问过的页面传递数据来访问。

当用户来自将数据传递给图表的页面时，我希望图表突出显示上一页中的特定数据（x 轴刻度和条形图）。

我已经设法突出显示相关的刻度（这是一个文本），但是我无法突出显示或向相应的栏添加不同的颜色。

这是一个有效的JSfiddle 示例

Illustration of the desired outcome

var chart = c3.generate({
    
    size: {
        height: 300,
        width: 500,
    },
     
    data: {  
    x:'x',
       columns: [
            ['nr',123,200,241,300,212,300],
            ['x','a','b','c','d','e','f'],
        ],
        type : 'bar',
        keys: {
            x: 'Name',
            value: ['nr']
        }
    },
   
    axis: {
      
        rotated: true,
        x: {
            type: 'category',
            tick: {multiline:false,}
        },
        y: {
            padding: {top:0, bottom:0},
            tick: { multiline:false, 
                    format: d3.format('s') }
        }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    },
    grid: {
        x: {
            show: false
        },
        y: {
            show: true
        }
    },
    legend: {show: false},
    tooltip: {
        format: {
            value: function (value, id) {
                var format = id === 'nr' ? d3.format(',') : function (d) { return  d + ' suffix'; };
                return format(value);
            }
        }
    }
});  

var highLightTick = d3.selectAll('.c3-axis-x .tick')
  .filter(function(){ 
    return d3.select(this).text() === 'd'
  })
  .style('fill', 'black')
  .style('font-size', '14px')
  .style('font-weight', 'bold');

如何连接刻度线和相应的条，以便将它们与其余数据分开突出显示？

任何帮助将不胜感激，谢谢。

Answer 1

修改 highLightTick 并将 mouseenter / mouseleave 处理程序绑定到每个项目。

查看它在fiddle 中的工作

const highLightTick = (tick, isOn) => tick
  .style('fill', isOn ? 'black' : 'gray')
  .style('font-size', isOn ? '14px' : '12px')
  .style('font-weight', isOn ? 700 : 400);

d3.selectAll('.c3-event-rect').each(function(d, i) {
  const el = d3.select(this);
  const tick = d3.select(`.tick:nth-of-type(${i + 1})`);
  el.on('mouseenter', () => highLightTick(tick, true))
    .on('mouseleave', () => highLightTick(tick, false))
});