如何禁用C3折线图中除指定点外的其他点选中功能？

Got it, let's fix this issue where unwanted points are getting selected when clicked. Here's a step-by-step solution tailored to your C3 setup:

1. Disable Global Click-to-Select Behavior #

First, we need to turn off C3's default functionality that lets users select any point by clicking. You can do this either during chart initialization or after the chart is rendered:

Option A: Disable during initialization #

Add the point.select: false config to your chart setup to prevent all points from being selectable by default:

var chart_tracker = c3.generate({
  data: {
    columns: [
      // Your data columns here (e.g., ['data1', ...], ['data2', ...])
    ],
    type: 'line'
  },
  point: {
    select: false // This disables the default click-to-select for all points
  },
  // ... other chart config options
});

Option B: Disable after chart is already rendered #

If you can't reinitialize the chart, use D3 (which C3 is built on) to remove the default click event from all points:

// Remove default click selection event from all points
d3.selectAll('.c3-circle').on('click', null);

2. Bind Custom Click Logic to Your Target Points #

Now, we'll add a click handler only to the specific points you want (data2's 19th and 47th points) to make them hide when clicked. We'll use the onrendered callback (if initializing) or directly select the points afterward:

Add during initialization (using onrendered) #

var chart_tracker = c3.generate({
  data: {
    columns: [
      // Your data columns
    ],
    type: 'line'
  },
  point: {
    select: false
  },
  onrendered: function() {
    // Select the specific points from data2 (indexes 19 and 47)
    var targetPoints = d3.selectAll('.c3-circle-data2').filter(function(d, i) {
      return i === 19 || i === 47; // Match your target indexes
    });

    // Bind click event to hide the point
    targetPoints.on('click', function() {
      d3.select(this).style('opacity', 0); // Hide the point
      // If you want to ensure no selected class lingers, add:
      // d3.select(this).classed('c3-circle-selected', false);
    });
  }
});

Add after chart is rendered #

// Target the specific points
var targetPoints = d3.selectAll('.c3-circle-data2').filter(function(d, i) {
  return i === 19 || i === 47;
});

// Bind hide-on-click logic
targetPoints.on('click', function() {
  d3.select(this).style('opacity', 0);
});

Key Notes #

• Double-check your index values: C3 uses zero-based indexing for data points, so confirm that 19 and 47 correctly map to the points you want.
• The .c3-circle-data2 selector targets all points from the data2 series—adjust the suffix if your series name is different.

内容的提问来源于stack exchange，提问作者Bahirji Naik