从{r2d3}迁移至{htmlwidgets}后无法生成绘图的问题求助

问题背景 #

我正在尝试将{r2d3}实现的可视化逻辑迁移到{htmlwidgets}框架中，用于构建R包。以下{r2d3}代码可正常运行，生成一个简单的X轴：

// set up constants used throughout script
const margin = { top: 80, right: 100, bottom: 80, left: 100 };
const plotWidth = 800 - margin.left - margin.right;
const plotHeight = 400 - margin.top - margin.bottom;

// set width and height of svg element (plot + margin)
svg.attr("width", plotWidth + margin.left + margin.right)
   .attr("height", plotHeight + margin.top + margin.bottom);  // Set plot background opacity

// create plot group and move it
let plotGroup = svg.append("g")
                   .attr("transform",
                         "translate(" + margin.left + "," + margin.top + ")");

// x-axis
let xAxis = d3.scaleLinear()
    .domain([0, 1])
    .range([0, plotWidth]);

// add x-axis to plot
plotGroup.append("g")
   .attr("transform", "translate(0," + plotHeight + ")")
   .call(d3.axisBottom(xAxis).tickFormat(d3.format(".0%")));

（配图：正常生成的X轴可视化效果）

但在使用{htmlwidgets}构建R包时，页面上没有任何绘图内容。检查HTML代码确认元素已存在，但可视化未渲染。

现有代码 #

HTML Widget Factory代码 #

function factory(el, width, height) {

  return {
    setupSvg: () => {
      d3.select(el).selectAll('*').remove();
      svg = d3.select(el).append('svg'); // Assign to the higher-scoped svg variable
      return svg;
    },

    draw: function() {
      // set up constants used throughout script
      const margin = { top: 80, right: 100, bottom: 80, left: 100 };
      const plotWidth = 800 - margin.left - margin.right;
      const plotHeight = 400 - margin.top - margin.bottom;

      // set width and height of svg element (plot + margin)
      svg.attr("width", plotWidth + margin.left + margin.right)
         .attr("height", plotHeight + margin.top + margin.bottom);  // Set plot background opacity

      // create plot group and move it
      let plotGroup = svg.append("g")
                         .attr("transform",
                               "translate(" + margin.left + "," + margin.top + ")");

      // x-axis
      let xAxis = d3.scaleLinear()
          .domain([0, 1])
          .range([0, plotWidth]);

      // add x-axis to plot
      plotGroup.append("g")
         .attr("transform", "translate(0," + plotHeight + ")")
         .call(d3.axisBottom(xAxis).tickFormat(d3.format(".0%")));

    },

    renderValue: function() {
      svg = this.setupSvg();
    },

    resize: function(newWidth, newHeight) {
      console.log('resize w, h', newWidth, newHeight);
      width = newWidth;
      height = newHeight;
      // Update the dimensions of the SVG element
      svg.attr('width', newWidth);
      svg.attr('height', newHeight);
      // Re-render the plot
      this.renderValue();
    }
  };
}

（配图：HTML元素存在的检查截图）

R调用代码 #

#' Visualize Probabilities
#'
#' A function to visualize probabilities using a lollipop chart
#'
#' @title lollipops
#'
#' @return A HTML widget object.
#' @export
#'
lollipops <-
  function(data,
           width = NULL,
           height = NULL,
           elementId = NULL) {
    # forward options using x
    opts = list(data = dataframeToD3(data.frame(data)))

    # Define sizing policy
    sizingPolicy = htmlwidgets::sizingPolicy(
      defaultWidth = 400,
      defaultHeight = 400,
      browser.fill = TRUE
    )
    # create widget
    htmlwidgets::createWidget(
      name = 'lollipops',
      opts,
      width = width,
      height = height,
      package = 'vizdraws',
      elementId = elementId,
      sizingPolicy = sizingPolicy
    )
  }

问题排查与修复 #

你遗漏了几个关键环节，以下是核心问题和修正方案：

1. 未执行绘制逻辑 #

在renderValue方法中，你只初始化了SVG容器，但没有调用draw()方法执行实际的绘图代码。需要修改renderValue：

renderValue: function() {
  svg = this.setupSvg();
  this.draw(); // 调用绘制方法
}

2. 全局变量污染问题 #

原代码中svg变量是全局作用域，容易引发冲突。建议将其改为工厂内的局部变量：

function factory(el, width, height) {
  let svg; // 局部作用域的svg变量

  return {
    setupSvg: () => {
      d3.select(el).selectAll('*').remove();
      svg = d3.select(el).append('svg');
      return svg;
    },
    // ... 其他方法保持不变
  };
}

3. 硬编码尺寸与widget适配问题 #

原代码中固定使用800/400作为基础尺寸，没有利用htmlwidget传入的width和height参数，导致尺寸与widget容器不匹配。修改draw方法中的尺寸计算：

draw: function() {
  const margin = { top: 80, right: 100, bottom: 80, left: 100 };
  // 使用widget传入的width和height，减去margin得到绘图区域尺寸
  const plotWidth = width - margin.left - margin.right;
  const plotHeight = height - margin.top - margin.bottom;

  // 设置SVG的实际尺寸为widget的宽高
  svg.attr("width", width)
     .attr("height", height);
  // ... 后续代码保持不变
}

4. resize逻辑优化 #

原resize方法中直接设置SVG尺寸后重复调用renderValue，会导致重复初始化SVG。建议改为更新width和height后直接调用draw()：

resize: function(newWidth, newHeight) {
  width = newWidth;
  height = newHeight;
  this.draw(); // 直接重绘，无需重新初始化SVG
}

5. R代码规范调整 #

htmlwidgets默认使用x作为传递参数的变量名，建议将opts改为x，保持框架规范：

x = list(data = dataframeToD3(data.frame(data)))

// 后续createWidget中使用x代替opts
htmlwidgets::createWidget(
  name = 'lollipops',
  x,
  // ... 其他参数不变
)

应用以上修改后，你的htmlwidget应该能正常渲染出X轴了。

内容的提问来源于stack exchange，提问作者Ignacio