React Recharts -> Проблема с всплывающей подсказкой в ​​LabelList на точечной диаграмме

Question

В течение некоторого времени мы сталкиваемся с проблемой LabelList, которая отображается над элементами точечной диаграммы. Если пользователь наводит на них курсор, всплывающая подсказка не отображается.

Код:

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = Recharts;
const data = [{x: 100, y: 200, z: 200}, {x: 120, y: 100, z: 260},
                  {x: 170, y: 300, z: 400}, {x: 140, y: 250, z: 280},
                  {x: 150, y: 400, z: 500}, {x: 110, y: 280, z: 200}]

const SimpleScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
        <Scatter name='A school' data={data} fill='#8884d8'>
          <LabelList dataKey="x" />
        </Scatter>
      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

Пример: https://jsfiddle.net/alidingling/gvsspn0h/

После удаления LabelList, работает нормально:

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = Recharts;
const data = [{x: 100, y: 200, z: 200}, {x: 120, y: 100, z: 260},
                  {x: 170, y: 300, z: 400}, {x: 140, y: 250, z: 280},
                  {x: 150, y: 400, z: 500}, {x: 110, y: 280, z: 200}]

const SimpleScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
        <Scatter name='A school' data={data} fill='#8884d8'>
        </Scatter>
      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

Пример: https://jsfiddle.net/gt0uy92a/2/

Проблема в том, что нам нужен LabelList, отображаемый в том виде, как он есть в первом примере, мы можем не меняйте положение, но подсказка должна работать правильно.

Answer 1

<LabelList 
  dataKey="x" 
  style={{pointerEvents: 'none'}}
/>

будет работать для вас. Вы можете связать событие onMouseEnter с компонентом LabelList .

Answer 2

Решение было не таким простым, оно было немного хитрым, но все же логичным. Если мы не можем ничего сделать с способом отображения элементов рендеринга SVG, не можем использовать z-index, мы все равно можем установить их непрозрачность.

const CustomizedCircle = props => {
    const {
        cx, cy, fill, size, z,
    } = props;
    const radius = size / 70;
    const value = z;

    return (
        <svg width={radius} height={radius} style={{overflow: 'visible'}}>
            <text style={{fontWeight: FONT_WEIGHT, fontSize: FONT_SIZE}} x={cx} y={cy + 5} textAnchor="middle">{value}</text>
            <circle style={{opacity: OPACITY}} cx={cx} cy={cy} r={radius} fill={fill} />
        </svg>
    );
};

Итак, сначала мы отрисовываем текст, затем мы отрисовываем круг и чтобы увидеть текст под кругом, мы устанавливаем круг непрозрачности.