Referencing JavaScript library in GWT for JavaScript Code
Question
I'm using the d3.js library and have some javascript code written that already draws the animation I want. For the sake of simplicity/ size, say I want to use this sample source code. I'm trying to use GWT to build a richer user interface around the animation. For example, if I designed a button in GWT java to toggle the particle animation on/off and trigger a "StopAnimation()" javascript function, where would I place the d3.js library so it is correctly referenced?
I've read the following posts related to this topic:
I'm really new to GWT so I may have missed something but all of these examples talk about having direct contact with the javascript library from your GWT code or interfacing with javascript code. In my case, the only javascript code I need to interface with from GWT is the particle example so I don't believe d3.js should need any special JSNI interface correct?...since the particle example code is the only part that utilizes d3.js. The problem I'm running into is that when I place the javascript code into the compiled html file, it never produces the animation.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="MenuViewer.css">
<title>Wrapper HTML for MenuViewer</title>
<script language="javascript" src="com.JoshBradley.MenuViewer/com.JoshBradley.MenuViewer.nocache.js"></script>
<script language="javascript" src="d3-v2.9.5/d3.v2.js"></script>
</head>
<body>
<div id="graph"></div>
<div id="menu"></div>
<script type="text/javascript">
var w = 960;
var h = 500;
var z = d3.scale.category20c();
var i = 0;
var svg = d3.select("body").select("graph").append("svg:svg").attr("width", w).attr("height", h).style("pointer-events", "all").on("mousemove", particle);
function particle() {
var m = d3.svg.mouse(this);
svg.append("svg:circle").attr("cx", m[0]).attr("cy", m[1]).attr("r", 1e-6).style("stroke", z(++i)).style("stroke-opacity", 1).transition().duration(2000).ease(Math.sqrt).attr("r", 100).style("stroke-opacity", 1e-6).remove();
}
</script>
</body>
I see the stuff I created in GWT but no particles. Initially I was getting reference errors because d3.js was not in the right folder, however once I put it in the war directory, they went away so the problem can't be a reference error. Am I allowed to place javascript code right into the html file like that? As of right now, I'm not worried about getting the GWT/ javascript interaction with the particle code working. I just want to see the appropriate GWT code and particle code animations on the same page. I'll worry about stopping the animation later.
The RootPanel is assigned to the "menu" div and the particle code assigned to the "graph" div. When I check the html through firebug, nothing is created in the "graph" div. Can someone explain what I'm doing wrong?
2 answers
solution1
1 ACCPTED 2012-07-29 19:56:02
This bit is incorrect:
d3.select("body").select("graph")
There are no elements called "graph", so this will be an empty selection.
D3 uses CSS3 to select elements. I think you wanted to select the element with ID "graph", so it should be:
d3.select("body").select("#graph")
solution2
0 2012-07-30 09:24:25
In addition to the answers above: Check out the source code for Protovis-GWT . Protovis is the predecessor of D3.js and Protovis-GWT is a GWT wrapper for it.
You can look at the source code of the GWT wrapper to see how they interact with Protovis and as Protovis and d3.js share some common design patterns it might help you with your use case.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.