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中，元素按照它们被附加的顺序分层（新附加在前面附加的顶部），并且默认情况下指针/鼠标事件不会透过其他元素。

要解决此问题，您可以将紫色矩形的pointer-events属性设置为none：

.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，因为画布可能会产生误导，因为d3可视化通常使用canvas而不是svg，并且都涉及不同的实现方法