D3を試してみて、いくつかの問題があります。座標系に耐える最善の方法がわからない。以下のソースを見つけてください。
編集：ここでフィドル
yScale -> .range([ height - padding, padding]);の代わりに逆座標をシミュレートしました.range([ padding - height - padding]);。これが最善の方法ですか。svg 内のすべてのオブジェクトを正しく配置する必要がある場合、最も外側の要素に適用するのが最善ですか?var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g") <---大きな長方形 ({"X":100, "Y": 100, "W":40, "H": 40}) は、軸の外側にあります。だから、私は何か間違ったことをしています。
適切なスケーリングと方向を使用して、このグラフを軸内に含めるための助けをいただければ幸いです。
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="d3.v2.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Script.js
var margin = {top: 10, right: 20, bottom: 20, left: 10},
width = 960 - margin.right - margin.left,
height = 480 - margin.top - margin.bottom
padding = 40;
var data = [
{"X":10, "Y": 10, "W":10, "H": 10},
{"X":100, "Y": 100, "W":40, "H": 40}
]
var xScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.X; })])
.range([padding, width - padding]),
yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.Y; })])
.range([ height - padding, padding]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom"),
yAxis = d3.svg.axis().scale(yScale).orient("left");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate("
+ margin.left + ","
+ margin.top + ")");
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return xScale(d.X); })
.attr("y", function (d) { return yScale(d.Y); })
.attr("width", function (d) { return (d.W); })
.attr("height", function (d) { return (d.H); })
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);