Question

我正在尝试使用react-faux-dom将d3与react进行集成，但我无法在浏览器上看到任何内容。我可以在react开发者工具中看到正在渲染的正确节点，但没有数据可见。有人可以让我知道我做错了什么。下面是我正在做的一个简单的例子。

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 ];

// append the svg canvas to the page
    let someDiv = d3.select(ReactFauxDOM.createElement('div'))
      .attr('width', w)
      .attr('height', h)
      .append("div")
      .attr("class", "node")


      someDiv.selectAll(".node")
      .data(dataset)  // <-- The answer is here!
      .enter()
      .append("div")
      .attr("class", "bar")
      .style("height", function(d) {
          var barHeight = d * 5;
          return barHeight + "px";
      })
      .style("color", "red")
      return (
        <div>
          <h3>render</h3>
           <div>
            {someDiv.node().toReact()}
          </div>
        </div>
       )
      }
    }

export default Test

当我检查react dev工具时，我可以看到正在渲染的节点但是在浏览器上看不到任何内容：

Answer 1

选择所有.node将不会返回任何内容，因为他们输入附加内容不会附加类node的元素。

someDiv.selectAll(".node")
      .data(dataset)  // <-- The answer is here!
      .enter()
      .append("div")
      .attr("class", "bar")

这应该会修复它，因为您要将divs添加到课程bar。

someDiv.selectAll(".bar")
      .data(dataset)  // <-- The answer is here!
      .enter()
      .append("div")
      .attr("class", "bar")

Example block where each appended div is a different color.

d3 + react-faux-dom，不使用.data（）呈现任何数据。输入

1 个答案: