Axis orientation option - x axis on top

[caravinden]

I am using dc.js for a long time. Moreover its really appreciated the latest release with d3.v4/v5 support. Kudos ! to the contributors.

Current version (v3), Is there any way to configure the x axis alignment on 'Top' instead of 'bottom'. In v2 chartRef.xAxis().orient("top") solve the issue. As d3.v4 with new axis orientation functions , what was the solution for manually applying the orientation for x axis d3.axisTop . As per the row chart documentation x axis orientation default to bottom. Row chart .

[gordonwoodhull]

Hi @caravinden. Excellent, it's our first v3-specific issue. Thanks for bringing it up.

Setting the orientation of the x axis was supported in v2, but the position was wrong:

Were you setting the position manually when you set the orientation in v2?

I think we should make rowChart.xAxis settable in v3, and in addition, set the position based on the orientation for row charts (as well as bar charts and other coordinate grid charts... fair amount of work but pretty straightforward).

[caravinden]

Thanks @gordonwoodhull for your excellent work. I tried to adding var _xAxis = d3.axisTop(); in row chart function and its working. But i know, that is not the proper solution.
why can't we add orientation as a config along with x config in the chart? Based on the config, axis got aligned. I saw similar kind of implementation applied in dc.compositeChart for d3.axisRight and d3.axisLeft.

Were you setting the position manually when you set the orientation in v2?"
Wrote an application specific code, where row chart height is too long along with y scroll.
Above case bottom axis invisible for the user to view the details. I added an external axis at the top of the chart. So all time axis will be visible for the user even there will the y scroll. For this case i draw the axis manually with orientation.

I would like to contribute to libraries but don't have any idea to proceed. Any kind of help is appreciated

[gordonwoodhull]

I see: if I understand correctly, you are basically using the "axis chart" solution mentioned in #1259 (comment), so you don't care about the position.

The way I'd prefer to solve this is make xAxis settable, and then detect which axis orientation is present and set the position accordingly. The useRightAxis feature for composite charts is more complicated and not needed here.

For your purpose, just making it settable is enough:

    _chart.xAxis = function (xAxis) {
        if (!arguments.length)
            return _xAxis;
        _xAxis = xAxis;
        return this;
    };

but I think it would be irresponsible to add this to the chart without also correcting the position. I'm taking a quick look right now to see how hard that is.

[gordonwoodhull]

Okay, slightly annoying, there is no way to detect what type of axis object you're given, per d3/d3-axis#16 - so I guess we would be stuck with implementing a separate function. ☹️

[gordonwoodhull]

Okay, I've made rowChart.xAxis settable on develop. It will be released in 3.0.2.

Since there's no way to detect the type of axis, I've provided a new example setting the position of the axis and grid lines manually. (Link will work once 3.0.2 is published.)

It's not that hard to change the positions manually:

  chart.on('pretransition', function() {
    chart.select('g.axis').attr('transform', 'translate(0,0)');
    chart.selectAll('line.grid-line').attr('y2', chart.effectiveHeight());
  });

But it would still be better to do this inside the library somehow.