javascript - 即使线条的不透明度为零，胡佛也会选择 D3 折线图线条

Question

我的应用程序中有一个 D3 折线图，将鼠标悬停在该线上时，会在显示线名称的线上方显示一个文本。之后，我在图表旁边实现了图例，图例允许在单击图例项时显示和消失线条。我的示例代码如下。但是现在却造成了这样的问题。现在我将从图例中选择的线条的不透明度设置为零，线条消失了。但是，如果我将鼠标悬停在该行较早的区域，它仍会显示悬停文本。有谁知道避免此问题的解决方案。

您可以通过单击图例中的两个项目来查看此问题，然后所有线条都消失了。但是，如果您将鼠标移到图表上，线条较早的位置，您会看到悬停时会显示文本

示例:https://jsfiddle.net/yasirunilan/ymavtsbj/4/

var data = [{
    name: "USA",
    values: [{
        date: "2000",
        price: "100"
      },
      {
        date: "2001",
        price: "110"
      },
      {
        date: "2002",
        price: "145"
      },
      {
        date: "2003",
        price: "241"
      },
      {
        date: "2004",
        price: "101"
      },
      {
        date: "2005",
        price: "90"
      },
      {
        date: "2006",
        price: "10"
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  },
  {
    name: "Canada",
    values: [{
        date: "2000",
        price: "100"
      },
      {
        date: "2001",
        price: "110"
      },
      {
        date: "2002",
        price: "145"
      },
      {
        date: "2003",
        price: "241"
      },
      {
        date: "2004",
        price: "101"
      },
      {
        date: "2005",
        price: "90"
      },
      {
        date: "2006",
        price: "10"
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  }
];
var width = 500;
var height = 300;
var margin = 50;
var duration = 250;

var lineOpacity = "0.25";
var lineOpacityHover = "0.85";
var otherLinesOpacityHover = "0.1";
var lineStroke = "1.5px";
var lineStrokeHover = "2.5px";

var circleOpacity = '0.85';
var circleOpacityOnLineHover = "0.25"
var circleRadius = 3;
var circleRadiusHover = 6;


/* Format Data */
var parseDate = d3.timeParse("%Y");
data.forEach(function(d) {
  d.values.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
  });
});


/* Scale */
var xScale = d3.scaleTime()
  .domain(d3.extent(data[0].values, d => d.date))
  .range([0, width - margin]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data[0].values, d => d.price)])
  .range([height - margin, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

/* Add SVG */
var svg = d3.select("#chart").append("svg")
  .attr("width", (width + margin) + "px")
  .attr("height", (height + margin) + "px")
  .append('g')
  .attr("transform", `translate(${margin}, ${margin})`);


/* Add line into SVG */
var line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.price));

let lines = svg.append('g')
  .attr('class', 'lines');

lines.selectAll('.line-group')
  .data(data).enter()
  .append('g')
  .attr('id', d => d.name.replace(/\s+/g, '') + "-line")
  .attr('class', 'line-group')
  .on("mouseover", function(d, i) {
    svg.append("text")
      .attr("class", "title-text")
      .attr("font-weight", "bold")
      .style("fill", color(i))
      .text(d.name)
      .attr("text-anchor", "middle")
      .attr("x", (width - margin) / 2)
      .attr("y", -30);
  })
  .on("mouseout", function(d) {
    svg.select(".title-text").remove();
  })
  .append('path')
  .attr('class', 'line')
  .attr('d', d => line(d.values))
  .style('stroke', d => color(d.name))
  .style('opacity', lineOpacity)
  .on("mouseover", function(d) {
    d3.selectAll('.line')
      .style('opacity', otherLinesOpacityHover);
    d3.selectAll('.circle')
      .style('opacity', circleOpacityOnLineHover);
    d3.select(this)
      .style('opacity', lineOpacityHover)
      .style("stroke-width", lineStrokeHover)
      .style("cursor", "pointer");
  })
  .on("mouseout", function(d) {
    d3.selectAll(".line")
      .style('opacity', lineOpacity);
    d3.selectAll('.circle')
      .style('opacity', circleOpacity);
    d3.select(this)
      .style("stroke-width", lineStroke)
      .style("cursor", "none");
  });


/* Add circles in the line */
lines.selectAll("circle-group")
  .data(data).enter()
  .append("g")
  .attr('id', d => d.name.replace(/\s+/g, '') + "-circle")
  .style("fill", d => color(d.name))
  .selectAll("circle")
  .data(d => d.values).enter()
  .append("g")
  .attr("class", "circle")
  .on("mouseover", function(d) {
    d3.select(this)
      .style("cursor", "pointer")
      .append("text")
      .attr("class", "text")
      .text(`${d.price}`)
      .attr("x", d => xScale(d.date) + 5)
      .attr("y", d => yScale(d.price) - 10);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .style("cursor", "none")
      .transition()
      .duration(duration)
      .selectAll(".text").remove();
  })
  .append("circle")
  .attr("cx", d => xScale(d.date))
  .attr("cy", d => yScale(d.price))
  .attr("r", circleRadius)
  .style('opacity', circleOpacity)
  .on("mouseover", function(d) {
    d3.select(this)
      .transition()
      .duration(duration)
      .attr("r", circleRadiusHover);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .transition()
      .duration(duration)
      .attr("r", circleRadius);
  });


/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScale).ticks(5);
var yAxis = d3.axisLeft(yScale).ticks(5);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height-margin})`)
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append('text')
  .attr("y", 15)
  .attr("transform", "rotate(-90)")
  .attr("fill", "#000")
  .text("Total values");

var keys = []

// Add the Legend
var legend = d3.select("body").selectAll(".legend")
  .data(data.map(d => d.name))
  .enter().append("font")
  .attr("class", "legend") // style the legend
  .style("color", color)
  .style("margin-left", 10 + "px")
  .style("padding-left", 10 + "px")
  .html(d => d)

d3.selectAll(".legend")
  .on("click", function(d) {

    keys.includes(d) ?
      keys.splice(keys.indexOf(d), 1) :
      keys.push(d)

    d3.select(this).style("opacity", () => keys.includes(d) ? .5 : 1)

    d3.select("#" + d.replace(/\s+/g, '') + "-line")
      .transition().duration(100)
      .style("opacity", () => keys.includes(d) ? 0 : 1);
    d3.select("#" + d.replace(/\s+/g, '') + "-circle")
      .transition().duration(100)
      .style("opacity", () => keys.includes(d) ? 0 : 1);
  })

Answer 1

您可以将 CSS pointer-events 设置为 none 以禁用所有鼠标交互，并在您更改时将其设置为 auto不透明度回到 1 以启用它们。

您可以使用这一行来完成:

.style("pointer-events", () => keys.includes(d) ? "none": "auto");

工作演示: JsFiddle

或者，您可以通过设置 display css 属性来替换设置不透明度和指针事件的行，如下所示:

.style("display", () => keys.includes(d) ? "none" : "inline");

工作演示: JsFiddle