如何在JSP中使用d3.js? [英] How to use d3.js in JSP?

查看:344
本文介绍了如何在JSP中使用d3.js?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在Spring web应用程序中,我试图创建一个虚拟JSP页面来构建:

 <%@ taglib uri =http://java.sun.com/jsp/jstl/coreprefix =c%> 
<%@ page session =false%>
< html lang =en>
< head xmlns:jsp =http://java.sun.com/JSP/Page
xmlns:c =http://java.sun.com/jsp/jstl/core
xmlns:fn =http://java.sun.com/jsp/jstl/functions
xmlns:spring =http://www.springframework.org/tags>
< meta charset =utf-8/>
< spring:url value =/ resources / scripts / d3.jsvar =d3_url/>
< script type =text / javascriptsrc =$ {d3_url}>
< jsp:text />
< / script>
< title>第页< / title>
< / head>
< body>
< h1> Hello world!< / h1>
< P>什么?< / P>
< script type =text / javascript>
d3.select(body)。append(p)。text(D3 works!
< / script>
< / body>
< / html>

我在页面的头部加载了d3.js,没有投诉,所以我假定找到了资源。但是当我在页面的主体中使用D3脚本时,我得到 Uncaught ReferenceError:d3未定义。我对调用的语法感到乐观,因为我已经在一个简单的HTML页面中测试过同样的事情并且工作。



所以,这不是方式在JSP页面中使用D3,或者不知何故,资源不会被加载。我的资源文件夹在配置文件中声明:



< resources mapping =/ resources / **location =/ resources / /> ,我三次检查d3.js是否在 / resources / scripts 文件夹中。



在JSP中使用d3.js的正确方法是什么?



更新:在Google Chrome开发工具控制台d3无法识别。这导致得出结论,尽管缺少关于在报头中加载d3的警告,它没有被正确加载。但是为什么?



更新2:当我替换



< spring:url value =/ resources / scripts / d3.jsvar =d3_url/>
< script type =text / javascriptsrc =$ {d3_url}>



< script type =text / javascriptsrc =/ resources / scripts / d3.js>



我收到无法加载资源:服务器在Chrome控制台中回复状态为404(找不到)



解决:我的坏。从资源位置删除前导斜线后,它工作! value =resources / scripts / d3.js。我仍然不知道为什么会影响结果,考虑到资源根已明确指出。

解决方案

是从JSP头中的资源位置删除前导斜杠。此外,应该为d3.js正确加载字符集指定为utf-8:

 < script charset = utf-8type =text / javascriptsrc =resources / scripts / d3.js> 


In a Spring web application I am trying to create a dummy JSP page to build on:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html lang="en">
<head xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:spring="http://www.springframework.org/tags">
<meta charset="utf-8" />
<spring:url value="/resources/scripts/d3.js" var="d3_url" />
<script type="text/javascript" src="${d3_url}">
    <jsp:text />
</script>
<title>A Pagey Page</title>
</head>
<body>
    <h1>Hello world!</h1>
    <P>What up?</P>
    <script type="text/javascript">
        d3.select("body").append("p").text("D3 works!");
    </script>
</body>
</html>

I loaded d3.js in the header of the page and there are no complaints about it, so I assume the resource was found. However when I come to use a D3 script in the body of the page I get "Uncaught ReferenceError: d3 is not defined". I am positive about the syntax of the call, because I've tested the same thing in a simple HTML page and it worked.

So, either this is not the way to use D3 in a JSP page or somehow the resource isn't loaded after all. My resources folder is declared in the config file:

<resources mapping="/resources/**" location="/resources/" /> and I triple-checked that d3.js is indeed in the /resources/scripts folder.

What is the right way to use d3.js in JSP?

UPDATE: In Google Chrome development tools console d3 is not recognized. This leads to conclusion that despite the lack of warnings about loading d3 in the header, it hasn't been properly loaded. But why?

UPDATE 2: When I replace

<spring:url value="/resources/scripts/d3.js" var="d3_url" /> <script type="text/javascript" src="${d3_url}">

with

<script type="text/javascript" src="/resources/scripts/d3.js">

I get Failed to load resource: the server responded with a status of 404 (Not Found) in the Chrome console for that line.

SOLVED: My bad. After removing the leading slash from the resource location, it worked! value="resources/scripts/d3.js". I still don't get why that would affect the outcome taking into account that the resources root was explicitly indicated.

解决方案

The solution was to remove the leading slash from the resource location in the JSP header. Also, charset should be specified as "utf-8" for d3.js to load properly:

<script charset="utf-8" type="text/javascript" src="resources/scripts/d3.js">

这篇关于如何在JSP中使用d3.js?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆