【发布时间】：2015-11-01 07:03:09
【问题描述】：
请原谅我是使用 D3 图表的新手。即使在排序之后，我似乎也遇到了图表以非常奇怪/横向的方式出现的问题。我正在尝试显示一个图表，显示两个值之间的增长趋势。数组中的值如下所示：[[200, 4.232660756790275], [300, 5.206851570440669], [400, 4.459431618637297]] 其中第一个值表示在 Y 轴上，第二个值表示在 X 轴上。下面是代码。难道我做错了什么？请指教，谢谢。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px Arial;
}
text.shadow {
stroke: #fff;
stroke-width: 2.5px;
opacity: 0.9;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
.area {
fill: lightsteelblue;
stroke-width: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 35, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
//var parseDate = d3.time.format("%d-%b-%y").parse;
var arrData = JSON.parse(window.localStorage.getItem("graphArray"));
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var area = d3.svg.area()
.x(function(d) { return x(d.idd); })
.y0(height)
.y1(function(d) { return y(d.timing); });
var valueline = d3.svg.line()
.x(function(d) { return x(d.idd); })
.y(function(d) { return y(d.timing); });
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var data = arrData.map(function(d) {
return {
idd: d[1],
timing: d[0]
};
});
console.log(data);
// function for the x grid lines
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
// function for the y grid lines
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.idd; }));
y.domain([0, d3.max(data, function(d) { return d.timing; })]);
// Add the filled area
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
// Draw the x Grid lines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
// Draw the y Grid lines
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
// Add the valueline path.
svg.append("path")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add the text label for the X axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height+margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Index of Difficulty");
// Add the white background to the y axis label for legibility
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("x", margin.top - (height / 2))
.attr("dy", ".71em")
.style("text-anchor", "end")
.attr("class", "shadow")
.text("Price ($)");
// Add the text label for the Y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("x", margin.top - (height / 2))
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Time (ms)");
// Add the title
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Fitts' Law");
</script>
</body>
从数组中传入数据后，图表的样子： 另外，我想知道如何更改 X 轴的文本，因为它似乎不在检索的值范围内。
【问题讨论】：
标签： javascript d3.js graph