d3条形图中条形之间的间隙不规则

时间:2017-06-20 12:58:54

标签: javascript css d3.js

我使用以下内容在条形图中创建条形图:

var _barPaddingFine = 1;

 // INTRODUCE THE BARS
 var sel = _plot.selectAll("rect")
     .data(TOPbarData);

 // EXIT old elements not present in new data.          
 sel.exit()
     .transition()
     .remove();

 // UPDATE old elements present in new data.
 sel
     .style("fill-opacity", 0.9)
     .transition()
     .duration(_transitionDuration) //1400
     .attr({
         x: function(d, i) {
             return _xScale(d.dt);
         },
         y: function(d) {
             return _yScale(Math.max(0, d.amount));
         },
         width: (quadrantWidth() / TOPbarData.length - _barPaddingFine),
         height: function(d) {
             return Math.abs(_yScale(d.amount) - _yScale(0));
         },
         fill: function(d) {
                 return d.amount < 0 ? "#FF0000" : _currentColr;
             }
     })
     .style("fill-opacity", 1);

它产生了这个:

enter image description here

条之间的间隙不规则,例如第1和第2条之间的间隙与第2条和第3条之间的间隙不同。

我猜测罪魁祸首是分裂quadrantWidth() / TOPbarData.length的结果正在被舍入?

我应该使用标准方法来标准化这些差距吗?

我在Plunker创建了一个模型:http://plnkr.co/edit/kxFB6Z?p=preview 我想要修改的代码是在第144行的barChart.js中 在Plunker中,它呈现出很好的常规间隙,但正如您在我们的生产环境中从上面的丝网印刷中看到的那样情况并非如此。

0 个答案:

没有答案