3

为什么d3.selectAll('rect')...在鼠标悬停函数中的下面的脚本中不能正常工作，但svg.selectAll('rect')...可以？

svg是来自 r2d3 的特殊预设选择器。

此外，我注意到d3.selectAll('rect').remove()从浏览器控制台运行例如从 Rstudio 运行可视化时不起作用。

这是来自 r2d3 示例，如下所示sample.js：

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)

var barHeight = Math.floor(height / data.length);

svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue')
    .on('mouseover', function(d){
      d3.select(this).attr('fill', 'red')
      
      //svg.selectAll('rect').attr('fill', 'red')
      d3.selectAll('rect').attr('fill', 'red')
      
    })

通过 R 从 R 运行r2d3::r2d3("sample.js", data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20))

4

2 回答 2

4

默认情况下，r2d3 将可视化放置在 shadow DOM 中。d3.select 和 d3.selectAll 都从 DOM 的根元素开始搜索，但不要冒险进入 shadow DOM 的子节点。

select 和 selectAll 都不会从正在搜索的当前树进入影子树。就像svg在 shadow DOM 中选择一个元素一样，可以找到矩形，svg.selectAll("rect")但不能找到d3.selectAll("rect")（相对于 SVG，矩形不是“阴影”）。

最简单的解决方案是通过将 r2d3 shadow 选项设置为 false 来不创建 shadow DOM。

例如（使用r2d3 文档中的基本示例）：

r2d3(options(r2d3.shadow = FALSE), data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = "barchart.js")

当然，这样做会失去影子根提供的封装，但这可能是更可取或中立的，具体取决于具体情况。

于 2020-07-22T18:28:48.660 回答
0

我发现有时 r2d3.shadow 选项并不总是很好，所以这里有另一种可能的解决方案。事件目标的父级将是您放置它的 svg/g。

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)

var barHeight = Math.floor(height / data.length);

svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
    .attr('width', function(d) { return d * width; })
    .attr('height', barHeight)
    .attr('y', function(d, i) { return i * barHeight; })
    .attr('fill', 'steelblue')
    .on('mouseover', function(d){
      const parent = d3.select(d.target.parentElement); // this is the original svg
      
      
      //svg.selectAll('rect').attr('fill', 'red')
      parent.selectAll('rect').attr('fill', 'blue')
      d3.select(this).attr('fill', 'red')
      
    })
于 2021-01-23T01:19:06.057 回答