如何在 JSF 中运行 D3 Javascript答案

【问题标题】：How to run D3 Javascript in JSF如何在 JSF 中运行 D3 Javascript
【发布时间】：2014-02-01 11:41:10
【问题描述】：

我按照本教程了解了如何将 Javascript 与 JSP 集成：

https://www.packtpub.com/article/jsf-images-css-and-js#more

基于此，我想将D3 Javascript library 添加到我在JSF 项目中的JSP 文件中。这是我拥有的JSP 文件：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script>
var dataset = [0,5,10,15,20];
            d3.select("body").selectAll("p") 
           .data(dataset)
           .enter()
           .append("p")
           .text("Paragraph");
</script>
</f:view>
</body>
</html>

我已经从 Eclipse 中导出了 WAR 文件并将其部署在 Tomcat 6 中。我还在 Tomcat 中部署的 JSF 项目中包含了 D3 库文件夹 (d3.v3)。当我插入localhost:8080 的 URL 时，不幸的是它没有向我显示预期的结果。是否可以在 JSP 文件中运行 D3 Javascript 库？这个特定的代码有问题吗？据我了解，JSP 在服务器端运行，而 Javascript 在网络浏览器上运行。谁能指导我如何让 D3 Javascript 在 JSP 中运行。提前感谢您的帮助。

【问题讨论】：

标签： javascript jsp jsf d3.js

【解决方案1】：

使用浏览器的开发工具来帮助您确定是否正在加载 d3.js。例如，在 Chrome 中，右键单击（或按住 Ctrl 键单击）浏览器窗口中的任意位置，选择“检查元素”，然后打开“网络”选项卡以查看页面加载了哪些资源。如果 d3.js 没有被加载，那么你需要在这一行调整路径：

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

【讨论】：

我正在使用 Firefox。老实说，我尝试过 Web 控制台。它告诉我 d3 没有定义。特别是，它向我显示了一个错误，其中该行是 d3.select(...)
好的，这可能意味着浏览器没有加载 d3。你确定你在脚本标签中找到了正确的路径吗？
好吧。我在 Web 内容中有 D3 文件夹，该文件夹位于部署在 Tomcat 中的项目内。我有另一个问题是 d3.v3.js 库中的非法字符
使用 Firefox 中的 Inspect，我收到以下消息：请求 URL：localhost:8080/JSFJavascriptSample/faces/d3/d3.v3.js 请求方法：GET 状态代码：HTTP/1.1 304 未修改
问题是编码问题吗？见：github.com/mbostock/d3/issues/1195

【解决方案2】：

我建议使用 jsfiddle（或本地 html）首先使用本地/静态 json/csv 数据测试您的页面。将html然后转换成JSF不会那么困难，并且更容易解决其他javascript问题。

【讨论】：

【解决方案3】：

正如 Bill F. 在 cmets 中对他的回答所说，d3.js 需要加载为 UTF-8。如果由于某种原因您无法更改页面本身的字符集，您可以通过将 charset="UTF-8" 参数添加到脚本标记来通过 UTF-8 加载 javascript 文件，例如。

<script type="text/javascript" charset="UTF-8" src="d3/d3.v3.js"></script>

当然，您仍然需要通过在提供页面时向Content-Type 响应标头添加charset 来检查服务器是否不会破坏您的一天，覆盖脚本标记中的声明。

【讨论】：