Question

我有一个流图，该图在路径上具有鼠标悬停事件，但是我尝试为此添加一个画笔，因为画笔的g元素位于鼠标悬停停止触发的路径的前面。

我找到了一些解决方案，将笔刷放在路径的后面，然后在路径上的鼠标悬停时将事件重新分配到笔刷，但是我需要将笔刷显示在路径的前面，因此该解决方案将不起作用对我来说。

我也尝试过将笔刷g元素上的指针事件设置为无，但是d3似乎会覆盖此设置。

有人知道我如何使两者同时工作吗？

下面的示例也可以看到on codesandbox。

import * as d3 from "d3";

const width = 500;
const height = 500;

let numberOfDataPoints = 100;
const numberOfLayers = 5;

let data = [];

for (let i = 0; i < numberOfDataPoints; i++) {
  let point = [];
  for (let j = 0; j < numberOfLayers; j++) {
    point.push(Math.floor(Math.random() * Math.floor(120)));
  }

  data.push(point);
}

const x = d3
  .scaleLinear()
  .domain([0, numberOfDataPoints - 1])
  .range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const z = d3.interpolateCool;

const area = d3
  .area()
  .x((d, i) => x(i))
  .y0(d => y(d[0]))
  .y1(d => y(d[1]));

const stack = d3
  .stack()
  .keys(d3.range(numberOfLayers))
  .offset(d3.stackOffsetWiggle)
  .order(d3.stackOrderNone);

let layers = stack(data);
y.domain([
  d3.min(layers, l => d3.min(l, d => d[0])),
  d3.max(layers, l => d3.max(l, d => d[1])),
]);

function update() {
  let path = d3
    .select("svg")
    .selectAll("path")
    .data(layers);

  path
    .enter()
    .append("path")
    .attr("fill", () => z(Math.random()))
    .merge(path)
    .attr("d", d => {
      return area(d);
    })
    .style("fill-opacity", 0.2)
    .attr("pointer-events", "all")
    .on("mouseover", d => {
      d3.select(d3.event.target).style("fill-opacity", 1);
    })
    .on("mouseout", d => {
      d3.select(d3.event.target).style("fill-opacity", 0.2);
    });
}

update();

let brush = d3
  .brushX()
  .extent([[0, 0], [width, height]])
  .on("end", brushEnd);

d3.select("svg")
  .append("g")
  .attr("class", "brush")
  .attr("pointer-events", "none")
  .style("pointer-events", "none")
  .call(brush);

function brushEnd() {
  console.log("brush end");
}

d3画笔阻止鼠标悬停事件

0 个答案: