Dc.js:条形图,条形重叠

时间:2018-06-20 16:15:20

标签: javascript d3.js bar-chart dc.js crossfilter

我目前正在工作正常的dc.js条形图,除了以下方面:

X轴表示多个日期,但是在同一天中,如果一个事件的关联值大于前一个,则它会与之重叠。

这里是一个示例: picture

例如:在2月22日,可能会看到橙色条被蓝色条隐藏。 那么,有没有一种方法可以自动解决此问题?我一直在浏览Dc文档,但是什么也没找到。

编辑:

我正在为图表发布代码,因此您可以看到我正在使用的比例和方法。

chart
          .width(680)
          .height(380)
          .x(d3.scaleTime().domain([firstDate,lastDate]))
          .xUnits(function(){return Object.keys(data.data).length;})
          .brushOn(false)
          .xAxisLabel('Aulas')
          .yAxisLabel('presencas')
          .dimension(DimensionHoras)
          .barPadding(0.5)
          .outerPadding(1)
          .group(sumGroup)
          .centerBar(true)
          .legend(dc.legend().legendText(function(d, i) { return console.log(d);}))
          .on('pretransition', function(chart) {
            chart.selectAll("rect.bar").on("click", function (d) {
              console.log(d);
              var yy = data.data.filter(function(h){
                return h.data_hora_ini == d.x
              });

             jQuery.each(yy,  function(i, val){
                        graficoAssiduidade(val.data_hora_ini, val.cd_curso, val.uc_cod, "Data: " + val.dataSemFormato + ", " + val.hor_nome_turno);

              });

                chart.filter(null)
                .filter(d.data.key)
                .redrawGroup();
            });
        });

          chart.on("renderlet", function(chart){
              chart.selectAll("rect.bar").style("fill", function(d){

                var filtro = data.data.filter(function(h){return h.data_hora_ini == d.x});
               // console.log(d);
                if(filtro[0].hor_nome_turno == "PL1")   
                 return "#6BAED6";
            else if(filtro[0].hor_nome_turno == "PL2")
                 return "orange";
            else if(filtro[0].hor_nome_turno == "PL3")
                 return "yellow";
            else if(filtro[0].hor_nome_turno == "TP1")
                 return "lightgreen";

                });
          });

1 个答案:

答案 0 :(得分:0)

我认为这与值的大小无关,而只是条形图比它们表示的x值(即天)宽。

现在,以您指定的.xUnits的方式:

.xUnits(function(){return Object.keys(data.data).length;})

您的图表正在计算钢筋宽度,就好像根本没有空白空间一样,允许钢筋占据全部宽度。

但是,由于您可能想要没有数据的空白,因此条形图应该只有一天的宽度。 为了完全正确,您应该使用

.xUnits(d3.timeDays)

但是,当然,现在所有的条形都将变得非常狭窄。我不确定解决这个问题的好方法。