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

如何解决C3.js 水平条形图 - 突出显示特定的 x 轴刻度和条形图

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

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

非常感谢任何帮助，谢谢。

解决方法

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

看看它在 fiddle

sum = 2
x=3
y=5000
for i in range (x,y):
    for j in range (2,i):
        if i%j==0:
            break
        elif i%j!=0 and j==i-1:
            sum += i
    if i==y-1 and y<2000000:
        x=y
        y+=5000
    else:
        continue
print(sum)