Question

我的d3代码与this example类似，在此示例中，笔刷功能非常有效。

但是，当我将上述示例的<script>...</script>部分复制并粘贴到我的index.js文件中时，如下所示：

<!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>

d3画笔功能的工作原理如下，即线条位于轴区域之外。我的css文件与上例中的相同。我想这与angularjs或bootstrap有关？

请提出建议，非常感谢。

Answer 1

问题出在<base href='/'>的顶行，如果您删除该行，页面将正常工作或删除“/”。它会更改上下文路径以加载您的css文件和其他脚本。查看this link以预览工作脚本。

编辑：如果你需要保留“base href”行，那么你可以在head部分包含你的style.css吗？看看这个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>

Answer 2

出现上述问题是因为SVG剪辑路径失败。由于<base href = '/'>标记，它失败了。 SVG clip-path属性需要url，这个基本标记（HTML 5模式）不能很好地提供它。

有两种解决方案。一种直接的方法是不使用HTML5模式，即尝试删除/修改基本标记。但是这个解决方案有一些问题，比如如果propeties的绝对url频繁更改，那么我们肯定需要base tag来设置相对路径。

另一种解决方案是优选的。那就是为SVG clip-path设置一个绝对URL，而不是从基本标记中寻求帮助，即

在控制器中，添加

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

或只是

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

然后改变每一个

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

是

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

然后全部完成。

Actullay此问题已在此post中解决，这也是我的参考。

为什么d3图表超出了图表区域的界限？

2 个答案: