无法在React中使用d3.js绘制条形图

Question

我正在尝试使用相应复选框旁边的每个栏绘制条形图。我有几个<div className="geneCountBar">，我尝试选择所有这些，附加数据，然后使用以下函数绘制条形码：

createBarChart = () => {
 let datum = this.props.datum.map((geneObj) => {
   return geneObj["values"].length;
 });
 d3.selectAll("div.geneCountBar")
   .data(datum)
   .enter()
   .append("div")
   .attr("class", "bar")
   .attr('transform', 'rotate(-90)')
   .style("height", function(d) {
      var barHeight = d * 5;
      return barHeight + "px";
  });
}

我刚从最基本的创建条形图的教程中使用d3：

http://alignedleft.com/tutorials/d3/making-a-bar-chart

在函数运行后不知何故 - 我在已经渲染DOM时使用按钮触发它 - 根本没有DOM操作。我检查了datum并且它是正确的：只是一个包含多个值的数组。 datum中的元素数量与所选div的数量相对应。我检查了d3.selectAll(div.geneCountBar)是否实际选择了正确的元素。 DOM看起来像这样：

进一步澄清我实际想要实现的目标。在这里你可以看到复选框：

在每个人的旁边，我想绘制一个条形图，表示数据集中每个项目的数量。

我在这里做错了什么？任何建议将不胜感激。

Answer 1

在这种情况下，你没有使用svg。需要为你的div设计风格。试试这个：

• 删除变换，样式宽度intead heigh
• div的样式背景色，
• 添加＆amp; nbsp; 以防止崩溃空div

变化

createBarChart = () => {
 let datum = this.props.datum.map((geneObj) => {
   return geneObj["values"].length;
 });
 d3.selectAll("div.geneCountBar")
   .data(datum)
   .enter()
   .append("div")
   .attr("class", "geneCountBar") // <----CHANGE class
   .style("background-color","red")
   .style("width", function(d) { return (d*5)+"px";})
   .html("&nbsp;")
}

每个栏必须如下所示：

<div class="geneCountBar" style="backgroud-color:red;width:50px;">&nbsp;</div>

或者，在CSS上定义.geneCountBar{background-color:red;}

<div class="geneCountBar" style="width:50px;">&nbsp;</div>

我无法访问您的装备。这是一个有效的代码。

var myData=[15, 30, 20, 10]

var graph = d3.select("#graph")

graph.selectAll("div#graph")
   .data(myData)             // maybe this's data(myData), not data(datum)
   .enter()
   .append("div")
   .attr("class", "geneCountBar") // <----CHANGE class
   .style("width", function(d) {return (d*5)+"px";})
   .html("&nbsp;")

.geneCountBar {
  background-color: red;
  margin:3px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="graph">

</div>

希望这个帮助

Answer 2

我最终在没有使用d3输入数据的情况下绘制条形图。 我在页面上放了以下divs：

       <div className="geneCountBar"
         style={{width: this.getHeightForGeneBar(idx, innerIdx), height:"10px",
           backgroundColor: getColorForGene(this.getGeneIdx(idx, innerIdx)),
           borderRadius: "2px"}}>&nbsp;</div>

使用以下两个函数在代码中设置单独的条形高度和颜色：getHeightForGeneBar(idx, innerIdx)和getColorForGene(this.getGeneIdx(idx, innerIdx))。