javascript - 单击 d3 路径后更改样式

Question

如果单击了路径，如何停止更改路径样式？我希望在单击 pathHover 后不更改路径样式。

let pathHover = this.svg.append('path')
    .data([data])
    .attr('class', 'line-padded')
    .attr('d', line);

pathHover.on('mouseover', function() {
    console.log('path mouse over');
    path.style('stroke-width', 6);
});

pathHover.on('mouseleave', function() {
    path.style('stroke-width', 4);
});

pathHover.on('click', function() {
    console.log('clicked');
    path.style('stroke', 'blue');
    path.style('stroke-width', 6);
});

Answer 1

有多种方法可以实现这一点。由于 DDD 中的第一个 D(也称为 D3)表示 data，因此我最喜欢的做法是为被点击的元素绑定(bind)一个数据，表明它被点击了:

d.clicked = true;

或者，如果您想在第二次点击后反转 bool 值:

d.clicked = !d.clicked;

然后，在 mouseover 中，只需检查该数据:

if (d.clicked) return;

这是一个使用绿色圆圈的演示:如果您将鼠标悬停在它们上面，它们就会变成红色。如果您单击它们，它们会变成蓝色，并且再也不会变成红色(或绿色)。

var svg = d3.select("svg");
var circles = svg.selectAll(null)
  .data(d3.range(5).map(function(d) {
    return {
      x: d
    }
  }))
  .enter()
  .append("circle")
  .attr("cursor", "pointer")
  .attr("cy", 75)
  .attr("cx", d => 30 + 50 * d.x)
  .attr("r", 20)
  .style("fill", "lime");

circles.on("mouseover", function(d) {
  if (d.clicked) return;
  d3.select(this).style("fill", "firebrick")
}).on("mouseout", function(d) {
  if (d.clicked) return;
  d3.select(this).style("fill", "lime")
}).on("click", function(d) {
  d.clicked = !d.clicked;
  d3.select(this).style("fill", "blue")
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>