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)

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

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

1 个答案: