D3：在线图中突出显示鼠标悬停部分的路径

Question

我想知道是否有可能有一个d3折线图，其中一个可拖动窗口突出显示或更改窗口中一行（路径）部分的颜色。

这是exemplifies the use case

的图片

我可以改变整条线或将线分成几部分，但我想知道是否可以简单地改变窗口中路径上的每个点。

我如何才能访问路径中的点以更改它们？从那里我想我可以改变它们。这是抓住他们的属性的问题。

Answer 1

1. 渲染整个路径两次，一次正常，一次突出显示
2. 在突出显示的版本
上使用clip-path
3. 将使用过的clipPath动态更改为突出显示的矩形形状。

Answer 2

图片中的内容不是改变路径颜色的窗口。这只是一个不透明度小于1的常规矩形。

但是，我想提出一些通常被忽略的事情：mix-blend-mode。

使用mix-blend-mode获取要更改的确切颜色非常困难，但这是一个有趣的功能，最重要的是，您不必 break < / em>路径。

看看这个演示，拖动矩形＆＃34;窗口＆＃34;。它突出了绿色路径，将其变成红色路径：

＆＃13;

＆＃13;

var data = d3.range(50).map(() => [Math.random() * 300, Math.random() * 150]);

var svg = d3.select("svg");
var path = svg.append("path")
  .attr("d", d3.line().curve(d3.curveBasis)(data))
  .style("stroke", "green")
  .style("stroke-width", "3px")
  .style("fill", "none");

var backRect = svg.append("rect")
  .datum({
    x: 100,
    y: 50
  })
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", 60)
  .attr("height", 40)
  .style("fill", "none")
  .style("stroke", "black");

var rect = svg.append("rect")
  .datum({
    x: 100,
    y: 50
  })
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", 60)
  .attr("height", 40)
  .attr("cursor", "pointer")
  .style("fill", "red")
  .style("mix-blend-mode", "hue")
  .call(d3.drag().on("drag", function(d) {
    rect.attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y);
    backRect.attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y)
  }))

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;