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

【问题标题】：Can't draw barchart using d3.js in React无法在 React 中使用 d3.js 绘制条形图
【发布时间】：2018-03-30 07:34:24
【问题描述】：

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

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 中的元素数量对应于所选divs 的数量。我检查了d3.selectAll(div.geneCountBar) 是否真的选择了正确的元素，它是。 DOM 看起来像这样：

进一步阐明我真正想要实现的目标。在这里你可以看到复选框：

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

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

【问题讨论】：

标签： javascript reactjs d3.js bar-chart

【解决方案1】：

在这种情况下，您没有使用 svg。需要为你的 div 设置样式。试试这个：

删除变换，样式宽度和高度
div 的样式背景颜色，
添加防止折叠空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>

希望有帮助

【讨论】：

我试过了，但没有用。如果我手动设置css 并添加&npsp; 我会看到条形图，但我无法使用d3 动态附加它们。上面的代码不知何故不起作用。

【解决方案2】：

我最终在没有使用d3s 输入数据的情况下绘制了条形图。我在页面上放了以下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)) 两个函数在代码中设置单独的条形高度和颜色。

【讨论】：