0

我有这张图表。

如您所见，我插入了两条路径。

圆圈上有鼠标悬停监听器。

现在的问题是，一个path覆盖另一个和属于它的圆圈，当悬停在底层圆圈时不会触发事件。

我的意思是这个圆圈：

在此处输入图像描述

我画这样的线条和圆圈：

//draw line
let valueline = d3.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return ys[count](d.val); });

let chart = chartBody.append("g")
  .attr("class", `charts chart-${count}`)
  .append("path")
    .attr("class", `line-${count} line`)
    .attr("d", valueline(data.samples));

//get dots for circle values
let node = chartBody.selectAll("dot")
                .data(data.samples)
                .enter()
                .append("g");

//add circle
node.append("circle")
  .attr("class", `circle-${count}`)
  .attr("cx", function(d) {return x(d.date); })
  .attr("cy", function(d) { return ys[count](d.val); })
  .attr("r", 8)
  .on("mouseover", showHideDetails)
  .on("mouseout", showHideDetails);

有没有办法在底层圈子上触发事件，还是我必须使用path标签以外的东西？

帮助将不胜感激。

4

1 回答 1

0

一种方法是将路径和圆元素分别分组。

let chartBody = svg.append("g")
  .attr("class", "chart-body")
  .attr("clip-path", "url(#clip)")
  //.call(zoom)

let rect = chartBody.append('svg:rect')
  .attr('id', 'rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', 'white');

// create group for path
let chartPathContainer = chartBody.append('g')
    .attr('class', 'chart-path-container');

// create group for circles after path so all circles are not covered by path
let chartCircleContainer = chartBody.append('g')
    .attr('class', 'chart-circle-container');

然后在绘制路径和点时，将它们各自的组用作容器，而不是将它们附加到chartBody.

  let chart = chartPathContainer.append("g")
    .attr("class", `charts chart-${count}`)
    .attr("data-axis", count)
    .append("path")
    .attr("class", `line-${count} line`)
    .attr("d", valueline(data.samples))
    .attr("data-axis", count)
    .attr("data-inactive", false);
  //.on("mouseover", showDetails)
  //.on("mouseout", hideDetails);

  //get dots for circle values
  let node = chartCircleContainer.selectAll("dot")
    .data(data.samples)
    .enter()
    .append("g");

只要确保没有相互重叠的圆圈/点。

于 2017-04-19T09:56:37.907 回答