Javascript D3图形对图形和轴进行排序
请原谅,因为我对使用D3图形还不熟悉。我似乎有这样一个问题:即使在排序之后,图形也会以一种非常奇怪/横向的方式出现。我试图显示一个图表,显示两个值之间的增长趋势。数组中的值如下所示:Javascript D3图形对图形和轴进行排序,javascript,d3.js,graph,Javascript,D3.js,Graph,请原谅,因为我对使用D3图形还不熟悉。我似乎有这样一个问题:即使在排序之后,图形也会以一种非常奇怪/横向的方式出现。我试图显示一个图表,显示两个值之间的增长趋势。数组中的值如下所示:[[200,4.232660756790275],[300,5.206851570440669],[400,4.459431618637297]其中第一个值在Y轴上表示,第二个值在X轴上表示。下面是代码。我做错什么了吗?请告知,谢谢 <!DOCTYPE html> <meta charset="ut
[[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>
身体{
字体:12px Arial;
}
text.shadow{
冲程:#fff;
笔划宽度:2.5px;
不透明度:0.9;
}
路径{
笔画:钢蓝;
笔画宽度:2;
填充:无;
}
.轴线路径,
.轴线{
填充:无;
笔画:灰色;
笔画宽度:1;
形状渲染:边缘清晰;
}
.grid.勾选{
笔画:浅灰色;
笔划不透明度:0.7;
形状渲染:边缘清晰;
}
.网格路径{
笔画宽度:0;
}
.区域{
填充物:淡蓝色;
笔画宽度:0;
}
var margin={顶部:30,右侧:20,底部:35,左侧:50},
宽度=600-边距。左侧-边距。右侧,
高度=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]);
变量y=d3.scale.linear().range([height,0]);
var xAxis=d3.svg.axis()
.比例(x)
.orient(“底部”)
.蜱(5);
var yAxis=d3.svg.axis()
.比例(y)
.东方(“左”)
.蜱(5);
var area=d3.svg.area()
.x(函数(d){返回x(d.idd);})
.y0(高度)
.y1(函数(d){返回y(d.定时);});
var valueline=d3.svg.line()
.x(函数(d){返回x(d.idd);})
.y(函数(d){返回y(d.定时);});
var svg=d3.选择(“主体”)
.append(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”,
“翻译(“+margin.left+”,“+margin.top+”);
var data=arrData.map(函数(d){
返回{
idd:d[1],
定时:d[0]
};
});
控制台日志(数据);
//用于x轴网线的函数
函数make_x_轴(){
返回d3.svg.axis()
.比例(x)
.orient(“底部”)
.滴答声(5)
}
//y轴网线的函数
函数make_y_轴(){
返回d3.svg.axis()
.比例(y)
.东方(“左”)
.滴答声(5)
}
//缩放数据的范围
x、 域(d3.extent(数据,函数(d){返回d.idd;}));
y、 域([0,d3.max(数据,函数(d){返回d.timing;})];
//添加填充区域
追加(“路径”)
.基准(数据)
.attr(“类别”、“区域”)
.attr(“d”,区域);
//绘制x轴网线
svg.append(“g”)
.attr(“类”、“网格”)
.attr(“变换”、“平移(0)”、“高度+”)
.调用(生成x轴()
.tickSize(-height,0,0)
.tick格式(“”)
)
//绘制y轴网格线
svg.append(“g”)
.attr(“类”、“网格”)
.调用(生成y轴()
.tickSize(-width,0,0)
.tick格式(“”)
)
//添加valueline路径。
追加(“路径”)
.attr(“d”,valueline(数据));
//添加X轴
svg.append(“g”)
.attr(“类”、“x轴”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis);
//添加Y轴
svg.append(“g”)
.attr(“类”、“y轴”)
.呼叫(yAxis);
//添加X轴的文本标签
svg.append(“文本”)
.attr(“转换”,
“平移(“+(宽度/2)+”,“+
(高度+页边距.底部)+“)”
.style(“文本锚定”、“中间”)
.文本(“难度指数”);
//将白色背景添加到y轴标签以确保其易读性
svg.append(“文本”)
.attr(“变换”、“旋转(-90)”)
.attr(“y”,6)
.attr(“x”,边距顶部-(高度/2))
.attr(“dy”,“.71em”)
.style(“文本锚定”、“结束”)
.attr(“类”、“阴影”)
.text(“价格($)”);
//添加Y轴的文本标签
svg.append(“文本”)
.attr(“变换”、“旋转(-90)”)
.attr(“y”,6)
.attr(“x”,边距顶部-(高度/2))
.attr(“dy”,“.71em”)
.style(“文本锚定”、“结束”)
。文本(“时间(毫秒)”;
//添加标题
svg.append(“文本”)
.attr(“x”,(宽度/2))
.attr(“y”,0-(margin.top/2))
.attr(“文本锚定”、“中间”)
.style(“字体大小”、“16px”)
.style(“文本装饰”、“下划线”)
.文本(“菲茨定律”);
以及从数组中传入数据后图形的外观:
另外,我想知道如何更改X轴的文本,因为它似乎不在检索的值范围内
不理解为什么将x轴定义为时间刻度
var x = d3.time.scale().range([0, width]);
仅通过读取变量,它似乎是某个id
本应如此
var x = d3.scale.linear().range([0, width]);
接下来,图表是正确的,数据是按此顺序排列的
[[200, 4.232660756790275], [300, 5.206851570440669], [400, 4.459431618637297]];
首先是4.3,然后是5.2,然后是4.4,这就是为什么它会像问题中所示的那样出现
我建议您对数据进行如下排序,以便现在的顺序是4.23、4.45、5.20
data.sort(function(a, b) {
return a.idd - b.idd;
});
这将使图形符合您的要求:)
工作代码
希望这有帮助 谢谢!!我现在明白了!非常感谢你!!