使用react-faux-dom整合D3时，浏览器无数据显示的问题求助

我帮你梳理下代码里的几个关键问题，正是这些问题导致浏览器看不到预期的内容：

1. 元素选择与数据绑定的逻辑混淆 #

你先创建了一个带class="node"的div，紧接着用someDiv.selectAll(".node")选择元素——这里的someDiv本身就是那个.node div，相当于你在它内部查找.node元素，初始状态下内部是空的。虽然enter()会创建对应数量的.bar div，但后续的样式缺失让这些元素彻底"隐身"了。更合理的做法是直接基于根容器操作，避免选择器层级混淆。

2. 样式设置缺失导致元素不可见 #

你的.bar div只设置了height和文字颜色color，但没有设置背景色和宽度，而且div内部没有任何文本内容——这就导致即使元素被渲染了，也没有视觉上的显示效果。另外，你给外层div用attr('width', w)和attr('height', h)是无效的：div是块级元素，尺寸需要通过style样式属性来设置，而非HTML属性。

修正后的代码示例 #

class Test extends React.Component {
  render(){
    const w = window.innerWidth;
    const h = window.innerHeight;
    const dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ];
    
    // 先创建根级faux容器
    const fauxContainer = ReactFauxDOM.createElement('div');
    // 基于根容器进行D3操作
    const root = d3.select(fauxContainer)
      .style('width', `${w}px`)
      .style('height', `${h}px`)
      .style('display', 'flex') // 可选：让柱状图横向排列
      .style('gap', '4px') // 可选：柱子间添加间距
      .style('align-items', 'flex-end'); // 可选：让柱子从容器底部开始排列

    // 直接在根容器下绑定数据创建柱状元素
    root.selectAll(".bar")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      .style("height", d => `${d * 5}px`)
      .style("width", "22px") // 给柱子设置固定宽度
      .style("background-color", "red") // 设置背景色，让柱子可见
      .style("border-radius", "2px"); // 可选：添加圆角优化视觉

    return (
      <div>
        <h3>render</h3>
        <div>
          {root.node().toReact()}
        </div>
      </div>
    )
  }
}
export default Test

额外排查小技巧 #

以后遇到类似问题，除了看React DevTools，还可以打开浏览器的Elements面板，查看元素的实际样式：比如是否有尺寸、是否被隐藏、样式是否生效——这能快速定位样式类的隐形问题。

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