javascript - D3 - 附加矩形停止工具提示工作

Question

我绘制了一个启用了工具提示的数据集。但是，如果我向 svg 添加更多元素，工具提示部分会生成错误。作为一个具体的例子，我有:

var canvas = ....;
canvas.selectAll("rect")
.data(data)
...
...
.append("title")
.text(function(d){return tooltiptext;});
...
canvas.append("rect").attr("x",0).attr("y",0)
.attr("width",w).attr("height",h).style("fill","purple")
.style("fill-opacity",0.1);

添加最后一个 canvas.append(...) 会使工具提示部分不起作用。我该如何解决这个问题？

这是一个有效的 jsfiddle https://jsfiddle.net/kbkbkb/rkok5zmr/

谢谢

Answer 1

您附加的最后一个矩形位于所有内容之上。这有效地阻止了下方元素的鼠标悬停事件。

在 svg 中，元素按照它们添加的顺序分层(新添加的在之前添加的之上)，默认情况下指针/鼠标事件不会穿透其他元素。

要解决此问题，您可以将紫色矩形的指针事件属性设置为无:

.style("pointer-events","none")

var data = [5, 6, 3, 7, 10];

var w = 300,
  h = 200;

var ys = d3.scale.linear().domain([0, 10]).range([0, 0.9 * h]);
var bw = Math.floor(w / data.length);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", bw * 0.9)
  .attr("height", function(d) {
    return ys(d);
  })
  .attr("x", function(d, i) {
    return bw * i;
  })
  .attr("y", function(d) {
    return h - ys(d);
  })
  .append("title")
  .text(function(d) {
    return d;
  });


svg.append("rect")
  .attr("x",0)
    .attr("y",0)
    .attr("width",w)
    .attr("height",h)
    .style("fill","purple")
    .style("fill-opacity",0.1)
    .style("pointer-events","none");  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这有效地使元素看穿鼠标事件。

或者，您可以为紫色矩形设置一个类或 ID，并使用 css 将它的指针事件设置为无:

var data = [5, 6, 3, 7, 10];

var w = 300,
  h = 200;

var ys = d3.scale.linear().domain([0, 10]).range([0, 0.9 * h]);
var bw = Math.floor(w / data.length);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", bw * 0.9)
  .attr("height", function(d) {
    return ys(d);
  })
  .attr("x", function(d, i) {
    return bw * i;
  })
  .attr("y", function(d) {
    return h - ys(d);
  })
  .append("title")
  .text(function(d) {
    return d;
  });


svg.append("rect")
  .attr("x",0)
    .attr("y",0)
    .attr("width",w)
    .attr("height",h)
    .style("fill","purple")
    .style("fill-opacity",0.1)
    .attr("class","overlay")

.overlay{
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

最后，作为一种不同的方法，您可以先附加紫色矩形，以便图表的条形图位于其上方，并且无需更改指针事件设置。 请注意，此方法需要更改条形图的输入选择 - selectAll("rect") 将包含紫色矩形，因此您可以将其更改为 selectAll(null)，如我在示例中做了。

var data = [5, 6, 3, 7, 10];

var w = 300,
  h = 200;

var ys = d3.scale.linear().domain([0, 10]).range([0, 0.9 * h]);
var bw = Math.floor(w / data.length);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);


svg.append("rect")
  .attr("x",0)
    .attr("y",0)
    .attr("width",w)
    .attr("height",h)
    .style("fill","purple")
    .style("fill-opacity",0.1)

svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("width", bw * 0.9)
  .attr("height", function(d) {
    return ys(d);
  })
  .attr("x", function(d, i) {
    return bw * i;
  })
  .attr("y", function(d) {
    return h - ys(d);
  })
  .append("title")
  .text(function(d) {
    return d;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我在我的回答中将您的变量名称 canvas 更改为 svg 因为 canvas 可能会产生误导，因为 d3 可视化通常使用 canvas 而不是 svg 和两者都涉及不同的实现方法