r2d3 可视化中的范围 - d3.selectAll vs svg.selectAll答案

【问题标题】：Scoping in r2d3 visualization - d3.selectAll vs svg.selectAllr2d3 可视化中的范围 - d3.selectAll vs svg.selectAll
【发布时间】：2020-11-12 03:23:19
【问题描述】：

为什么d3.selectAll('rect')... 在鼠标悬停功能中不能像下面脚本中看到的那样工作，而svg.selectAll('rect')... 可以？

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

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

这是来自 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')
      
    })

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

【问题讨论】：

标签： r d3.js r2d3

【解决方案1】：

我发现有时 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')
      
    })

【讨论】：

【解决方案2】：

默认情况下，r2d3 将可视化放置在阴影 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 文档中的 base example）：

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

当然，这样做会失去影子根提供的封装，但根据情况，这可能是可取的或中性的。

【讨论】：