1

My d3 codes are alomost like this example, in this example, the brush functionality works pretty well.

However, when I just copy and paste the <script>...</script> part of the above example into my index.js file like this:

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <title>Hello world!</title>
  <base href='/'>
  <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript" src="libs/d3/d3.min.js"></script>
  <!--some more script here-->

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="pragma" content="no-cache"/>
</head>

<body ng-controller="MainController as mainCtrl">

  <nav class="navbar navbar-default">
    <!--navbar here-->
  </nav>

  <div ng-view> </div>

</body>
</html>

<script>
  // exactly the same code in the above d3 brush example 
</script>

The d3 brush function works as follows, i.e, the lines get outside of the axis area. My css file is the same as that in the above example. I guess it has something to do with angularjs or bootstrap?

Please advise, thanks a lot.

enter image description here enter image description here

leonsPAPA
  • 657
  • 2
  • 13
  • 29

2 Answers2

1

The problem is with the top line of <base href='/'> if you remove that line the page will work ok or remove "/". It changes the context path to load your css file and other scripts. Look at this link to preview the working script.

EDIT : If you need to keep "base href" line then can you include your style.css in the head section? Look at this modified link. 

<head>
  <title>Hello world!</title>

 <base href=''>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
somename
  • 978
  • 11
  • 30
  • Thank you@D3_GXT_Java This solution requires remove or modification of `` which is important for my rest codes, if I change it, all the other codes should be updated and not sure if it will case any other problem. Any other solution that can help me leave the `` unchanged? – leonsPAPA Sep 16 '15 at 19:56
  • Check the edited answer - if you can include your style css in the head section it should work. – somename Sep 16 '15 at 20:05
  • It does not work well when the css is put in the head. The modified link shows exactly the same problem I have now. Does that work in your side?@D3_GXT_Java – leonsPAPA Sep 16 '15 at 20:15
  • pls see the new screenshot I attached. I think you are right, the tag is the reason, here is a useful [reference](https://github.com/angular/angular.js/issues/8934) @D3_GXT_Java – leonsPAPA Sep 16 '15 at 20:25
  • thanks for your hints, it is solved, pls see my answer. @D3_GXT_Java – leonsPAPA Sep 16 '15 at 20:59
0

The above problem happens because the SVG clip-path fails. It fails because of the <base href = '/'> tag. SVG clip-path attribute requires url, which is not well provided by this base tag (HTML 5 mode).

There are two solutions. One straightforward way is not using HTML5 mode, i.e, try to remove/modify the base tag. But this solution has some problems, like if the absolute url of propeties changes frequently, then we definitely need base tag to set a relative path.

Another solution is preferred. That is to set an absolute url for SVG clip-path, instead of asking help from the base tag, i.e,

In the controller, add

var vm = this;
vm.path = $location.path();

or just 

$scope.path = $location.path();

then change every

.attr("clip-path", "url(#clip)")

to be 

.attr("clip-path", "url(" + ctrl.path + "#clip)")

then all done.

Actullay this problem is solved in this post, which is also my reference.

Community
  • 1
  • 1
leonsPAPA
  • 657
  • 2
  • 13
  • 29