Data Getting "Clipped" in MultiBarChart

[angularjs-nvd3-directives]

Data Getting "Clipped" in MultiBarChart

[cmaurer]

let me take a look

[cmaurer]

It has data (first rect, height === 9.375).

<g class="nv-group nv-series-0" style="stroke-opacity: 1; fill-opacity: 0.75; fill: #1f77b4; stroke: #1f77b4;">
  <rect class="nv-bar positive" x="0" y="150" height="9.375" width="101.61290322580646" transform="translate(11.290322580645162,0)" style="fill: #1f77b4; stroke: #1f77b4;"></rect>
  <rect class="nv-bar positive" x="0" y="0" height="159.375" width="101.61290322580646" transform="translate(124.19354838709678,0)" style="fill: #1f77b4; stroke: #1f77b4;"></rect>
  <rect class="nv-bar positive" x="0" y="46.875" height="112.5" width="101.61290322580646" transform="translate(237.09677419354838,0)" style="fill: #1f77b4; stroke: #1f77b4;"></rect>

</g>

If I force y to '0', it shows.

    <nvd3-multi-bar-chart data="exampleData" id="exampleId" width="550" height="350" forcey="[0]" yaxisshowmaxmin="true">
        <svg></svg>
    </nvd3-multi-bar-chart>

[homerlex]

Yes, you are correct, forcey does the trick. NVD3 must forceY to 0 by default - that is why my non directive version worked. Nice find.

However, the results of forcing y to [] is different in my non directive rendering. In the directive rendering the bottom of the chart is clipped (as shown before):

When doing the following in m y non directive version:

chart.forceY([]);

the bottom is not clipped:

[cmaurer]

can you post your nvd3 chart code?

[homerlex]

Here you go:

  function renderChart(chart, data, container) {
    d3.select(container)
            .datum(data)
            .transition().duration(1000).call(chart);

    nv.utils.windowResize(
            function() {
              chart.update();
            }
    );
  }

  function createMultiBarChartByDate(data, container) {

    var chart = nv.models.multiBarChart()
            .x(function(d,i) { return d[0] })
            .y(function(d) { return d[1] });

    chart.showLegend(false);
    chart.showControls(false); 
    chart.forceY([]);

    chart.xAxis
            .showMaxMin(true)
            .tickFormat(function(d) {
              return d3.time.format('%x')(new Date(d))
            })

    renderChart(chart, data, container);
    return chart;

  }

[cmaurer]

Thats strange. I will need to look at this later tonight when I have more time.

I am curious to know why your y-axis is different between the examples. The directive version seems to have a different scale than the 'native' nvd3 version.

Also, I did find a couple of issues (1. forceY should be [0] by default, and I somehow had only [], 2. I had a cut and paste error in the configure y axis code, where I was calling the x-axis method for the y-axis.)

Thanks,
Chris

[cmaurer]

Ok, I just tried it again using only nvd3 and d3, here is what I got:

I am not getting the same clipping issue. I would like to be sure we are apples to apples. Next step would be to make sure we are using the same version of d3.js and nvd3.js. This example used (nvd3#1.1.10b, and d3.js#3.3.3.

I will put my example in plnkr when it comes back online, or I will push it in the examples.

[homerlex]

Y, when using only nvd3 and d3 I do not have the clipping. Its when I use angularjs-nvd3-directives that I get the clipping.

FYI - I am using nvd3#1.0.0b, and d3.js#3.1.5

[cmaurer]

Sorry, I am confused. I was working off your comment in the original post "I've used the same data in an NVD3 chart that I had created without the directives and it does show the bar.".

You mentioned that the non-directive version showed the bar, and the directive version does not show the bar.

My example from last night was nvd3, and d3 only, and the data was clipped, which is different from the issue you are reporting.

Let me create a couple of plnkrs that we can work from to verify. Should be later today.

Thanks,
Chris

[cmaurer]

ok, take a look at the following plnkr when you get a chance.

http://plnkr.co/edit/NQjLoJXnxSWff2OBfPux

[homerlex]

Perhaps it has to do with the resizing. The "with angular" is definitely different than the "without" version.

In the "with" version I need to resize the frame to see the entire chart:

http://screencast.com/t/4GvEeErlRfmI

[cmaurer]

The saga continues....

I did a few things to continue working the issue.

1. Added another version of the directives that replaces the window resize code with the original nvd3 code.
2. Added the latest nvd3.js (v1.1.10-b) code locally
3. checked to be sure the setup was consistent between all 3 examples.

Since d3.js charts are essentially HTML, I took the svg code from the examples and compared them.

The result is that they are all basically the same.

This is the image that shows the comparison between the raw version and the directive version with the original code. (fyi, I saved them in the plnkr under svg.*.txt)

The charts are essentially the same. The differences are ordering of a few attributes. The attribute values are the same.

This however does not solve your issue which I think is a proper display of the chart. Is there a reason why you are using forcey without a value? (forcey="[]"). If you used forcey="[0]", and added a margin, I think the chart behaves a little more like what you are looking for. Check out the page index.directive.original.forcey.html in the plnkr.

[homerlex]

The only reason I set forcey to [] what because that used to be your default and I was showing that there was a difference in the directive vs. non-directive rendering when setting forcey to []. In practice I would always set it to [0].