Question

我是d3.js中的新手，我正在尝试在JSP中创建d3.js程序。我有两个文件 1）HTML 2）javascript

现在，当我在HTML文件中链接javascript时，它会显示饼图。

问题：当我尝试在jsp中运行此代码并且它无法正常工作时？我不明白只是通过将扩展名从html更改为jsp，为什么程序停止显示饼图？

您的建议会有所帮助......

这是代码 -

这是JSP文件

<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css" />
<script type="text/javascript" src="libss/d3.js" charset="UTF-8"></script>
<script type="text/javascript" src="libss/d3.min.js" charset="UTF-8"></script>
<script src="http://d3js.org/d3.v3.js" charset="UTF-8"></script>
</style>
</head>
<body>
<script type="text/javascript" src=" E:\javaa\data_vis\data-vis-new\libss\temp.js">        
 </script>  
<script>     
dataset = [ 7, 66, 20, 45, 6, 25 ];
</script>
 </body>
</html>

这是temp.js文件 -

//Width and height
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

//Set up groups
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

//Draw arc paths
arcs.append("path")
.attr("fill", function(d, i) {
    return color(i);
})
.attr("d", arc);

//Labels
arcs.append("text")
.attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
    return d.value;
});

Answer 1

这是因为您没有将脚本标记放在正确的位置。

解决方案＃1

只需尝试将脚本lib移动到正文的底部：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

  </head>

  <body> 

    ...
    // try import it here
    <script type="text/javascript" src="lib/pie.js"></script>

  </body>

</html>

plnkr

解决方案＃2

如果您坚持将lib放入头部，请尝试在脚本元素中添加defer属性：

<head>
    <meta charset="utf-8">
    <title>D3: Pie layout</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" defer></script>
    <script type="text/javascript" src="lib/pie.js" defer></script>
    <script>
      dataset = [1,2,3,4,5];
     </script>
</head>

由于您的代码无法工作的原因，请参阅此主题：

Where is the best place to put tags in HTML markup

Answer 2

我得到了答案。我没有得到我的程序开始工作的逻辑没有任何问题。

这是解决方案 -

将您自己的.js文件放在dataset变量下面，如下所示......

<body>
<script>     
dataset = [ 7, 66, 20, 45, 6, 25 ];
</script>
<script type="text/javascript" src=" E:\javaa\data_vis\data-vis-new\libss\temp.js">        
 </script>  
</body>

如果你不理解它只是用@和我的名字在上面评论，稍后会告诉你......

d3.js代码不适用于JPS

2 个答案: