我的 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 有关？
请指教，万分感谢。
最佳答案
问题出在 <base href='/'> 的顶行如果您删除该行，页面将正常工作或删除“/”。它会更改上下文路径以加载您的 css 文件和其他脚本。看this link预览工作脚本。
编辑: 如果您需要保留“base href”行，那么您可以在头部部分包含您的 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>
关于javascript - 为什么d3图表超出了图表区域的边界？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32614873/