为什么d3图表超出了图表区域的边界？答案

【问题标题】：Why d3 chart exceeds the boundaries of the chart area?为什么d3图表超出了图表区域的边界？
【发布时间】：2015-09-16 17:19:14
【问题描述】：

我的 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有关？

请指教，非常感谢。

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap d3.js

【解决方案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>

【讨论】：

谢谢@D3_GXT_Java 此解决方案需要删除或修改<base href = '/'>，这对我的其余代码很重要，如果我更改它，所有其他代码都应该更新，不确定是否会出现任何情况其他问题。还有其他解决方案可以帮助我保持<base href='/'> 不变吗？
检查编辑后的答案 - 如果您可以在 head 部分包含您的样式 css，它应该可以工作。
把css放在head里的时候效果不好。修改后的链接显示了我现在遇到的完全相同的问题。这对你有用吗？@D3_GXT_Java
请看我附上的新截图。我想你是对的，标签是原因，这里有一个有用的reference@D3_GXT_Java
感谢您的提示，已解决，请看我的回答。 @D3_GXT_Java

【解决方案2】：

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

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

另一种解决方案是首选。也就是给SVGclip-path设置一个绝对url，而不是向base标签求助，即

在控制器中，添加

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

或者只是

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

然后改变每个

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

成为

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

然后就完成了。

其实这个问题在这个post中解决了，也是我的参考。

【讨论】：