我有一个奇怪的问题。我使用 d3js 创建了一个在原始 html 文件中运行良好的条形图。然后我将后者嵌入到一个 jquery 移动小应用程序中。问题是我的条形图发疯了。首先，它不再动画，其次，我所有的条都具有相同的高度，尽管后者是根据绑定到条的数据值分配的。
如果我把它放在一个只有 d3js 的单独的 html 文件中，我的代码可以完美运行。这是我的代码：
CSS
#report{
overflow: hidden;
}
div.d3bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
margin: 2px;
}
JS
function init(){
document.addEventListener("deviceready", onDeviceReady, false);
$(document).ready(function(){
$("a").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
$.mobile.changePage($($(this).attr("href")), { transition: "slide"});
});
});
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/XXXX.min.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css">
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
<script type="text/javascript" charset="utf-8" src="js/d3.v2.min.js"></script>
<title>Lotterie Nationale Loterij</title>
</head>
<body onload="init();">
<!-- Start of first page: #one -->
<div data-role="page" id="home" data-theme="a">
<div data-role="header"><h1>XXXXX Header</h1></div>
<div data-role="content" >
<p><a id="btn_dashboard" href="#page_dashboard" data-role="button">Dashboard</a></p>
<p><a id="btn_pos360" href="#page_pos360" data-role="button">POS 360°</a></p>
<p><a id="btn_My_Activities" href="#page_My_Activities" data-role="button">My Activities</a></p>
<p><a id="btn_about" href="#page_about" data-role="button" data-rel="dialog" data-transition="pop">About</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<h4>Computer Sciences Corporation</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<div data-role="page" id="page_dashboard" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>Your Dashboard</h1></div>
<div data-role="content" id="report">
<script type="text/javascript">
$("#page_dashboard").live("pageshow",
function (event) {
$("#report").empty();
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];
d3.select("#report").selectAll("p")
.data(dataset)
.enter()
.append("div")
.transition()
.ease("linear")
.attr("class", "d3bar")
.duration(400)
.style("height", function(d){
return 10*d;
})
.text(function(d){return d;});;
$("#report").trigger("create");
}
);
</script>
Some statistics here and there
</div><!-- /content -->
</div>
<div data-role="page" id="page_pos360" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>Point Of Sales 360°</h1></div>
<div data-role="content" >
Some pos charts here and there
</div><!-- /content -->
</div>
<div data-role="page" id="page_My_Activities" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>My Activities</h1></div>
<div data-role="content" >
Some activities
</div><!-- /content -->
</div>
<div data-role="page" id="page_about" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>About XXXX Prototype</h1></div>
<div data-role="content" >
Prototype for XXXXX --
Computer Sciences Corporation
</div><!-- /content -->
<!--<div data-role="footer" data-theme="a">
<h4>The End</h4>
</div> /footer -->
</div><!-- /page one -->
</body>
</html>
有人看到问题了吗？