奇妙な問題があります。生のhtmlファイルでうまく機能するd3jsを使用して棒グラフを作成しました。次に、後者を 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>
誰もが問題を見ますか？