chart body's clip-path not working with Angular html5 mode

[yandongCoder]

Angular SVG url problem as follow:
https://github.com/jeffbcross/angular-svg-base.

change:

.attr('clip-path', 'url(#' + getClipPathId() + ')');

to:

.attr("clip-path", "url(" + window.location.href + "#" + getClipPathId() + ")");

this could avoid failure of clip-path when use Angular html5 mode.

[gordonwoodhull]

Hi @yandongCoder, thanks for the report.

Out of curiosity, are you using angular-dc or are you embedding dc.js in Angular another way?

This looks like a safe change but I wish I had a test case.

[yandongCoder]

Hi @gordonwoodhull
I'm just embedding dc.js in Angular Directive.

angular.module('admin9cApp')
  .directive('c3Chart', function ($timeout) {
    return {
      restrict: 'E',
      scope: {
          data: "="
      },
      link: function postLink(scope, element, attrs) {
        var chart = c3.generate({
            bindto: element[0],
            data: {
              json: {
                  data: scope.data
              }
.......

[gordonwoodhull]

I don't have a codebase for testing this in Angular, but I've added the fix for 2.0 beta 28, and verified that it doesn't break other charts, and updated the tests to match.

[gordonwoodhull]

Thanks @yandongCoder!

[mtraynham]

Just butting in, this actually breaks the clip path for me...
HTML5 mode is off by default in Angular and it will put # in the URL for routing. This is a fragment identifier, so you can route within the single page application without reloading.

In URIs for MIME text/html pages such as http://www.example.org/foo.html#bar the fragment refers to the element with id="bar".

If you have a URL like:
http://localhost:8080/#/dashboard/foo
The clip-path reference becomes:
http://localhost:8080/#/dashboard/foo#chart-a-clip
Which is an invalid selector.

We should be chopping off the existing fragment identifier if it exists.

var href = window.location.href,
    fragmentLocation = href.indexOf('#');
href = fragmentLocation > -1 ? href.substr(0, fragmentLocation) : href;
...
.attr('clip-path', 'url(' + href + '#' + getClipPathId() + ')');

Although I still fail to see why this is necessary, using '#' + getClipPathId() without the href should refer to the containing document.

[gordonwoodhull]

Good catch @mtraynham, yes we absolutely must support URLs that already have fragments.

I tried a few times to understand what the Angular base tag is about (there's a link to an issue in the library linked above), but ultimately I don't really want to understand Angular (too rigid for me)... so I'll just take people's word on this as long as it doesn't break the library for anyone else.

I'll reopen this and do something like what you suggested in the next release.

[gordonwoodhull]

Going with window.location.href.split('#')[0]

http://stackoverflow.com/a/5818302/676195

[mtraynham]

Mmm nice and concise, I like it!