Dc.js：条形图，条形重叠

Question

我目前正在制作一个运行良好的 dc.js 条形图，除了一件事：

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

这是一个例子：

例如：在 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";

                });
          });

Answer 1

我不认为这与值的大小有关，而只是条形比它们所代表的 x 值（天数）更宽。

现在，按照你指定的方式.xUnits：

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

您的图表正在计算条形宽度，就好像根本没有空白空间一样，并且允许条形占用所有空间。

但由于您可能想要没有数据的间隙，因此条形应该只有一天宽。 为了完全正确，您应该使用

.xUnits(d3.timeDays)

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