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

我用C3.js创建了一个非常简单的水平条形图，它列出了我的SQL数据库中的数据。 该图表可以自己访问，无需任何过滤器，也可以使用$\u GET从以前访问过的页面传递数据

当用户从将数据传递到图表的页面返回时，我希望图表突出显示上一页中的特定数据（x轴记号和条形图）

我已经设法突出显示了相关的勾号（这是一个文本），但是我无法突出显示或在相应的栏中添加不同的颜色

下面是一个工作示例

如何连接勾号和相应的栏，使其与其他数据分开突出显示

---

非常感谢您的帮助。

修改highLightTick并将鼠标指针绑定到每个项目

看看它在一个大房间里工作

---

这是我稍后想要实现的效果，但是，我的目标是突出显示特定的勾号及其对应的栏，因此当用户到达页面时，它已经被突出显示。这就是我使用过滤函数的原因。正如我的jsfiddle示例所示，它对tick很有效，但我无法在条中过滤tick的文本项。尽管如此，我还是非常感谢你的努力。

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

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