Javascript 试图在D3中生成错误图表时出现问题
我正在尝试使用D3构建一个错误图表,如下所示: 我遇到的问题是,没有显示最大误差平方(顶部的平方)。以下是我目前掌握的情况:Javascript 试图在D3中生成错误图表时出现问题,javascript,d3.js,Javascript,D3.js,我正在尝试使用D3构建一个错误图表,如下所示: 我遇到的问题是,没有显示最大误差平方(顶部的平方)。以下是我目前掌握的情况: var m = { top: 10, right: 10, bottom: 10, left: 10 } var h = 400 - m.top - m.bottom; var w = 500 - m.left - m.right; var r = 5; var data = [ { x: 0, y: 12, yMin: 10, yMax: 20 }, { x
var m = { top: 10, right: 10, bottom: 10, left: 10 }
var h = 400 - m.top - m.bottom;
var w = 500 - m.left - m.right;
var r = 5;
var data = [
{ x: 0, y: 12, yMin: 10, yMax: 20 },
{ x: 1, y: 25, yMin: 17, yMax: 30 },
{ x: 2, y: 15, yMin: 12, yMax: 17 },
{ x: 3, y: 10, yMin: 5, yMax: 14 },
{ x: 4, y: 5, yMin: 1, yMax: 6 }
]
var xScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.x } )])
.range([0, w]);
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.yMax } )])
.range([h, 0]);
var vis = d3.select('body').append('svg')
.attr({
height : h + m.top + m.bottom,
width : w + m.left + m.right,
})
.append('g')
.attr({
transform : 'translate(' + m.left + ',' + m.top + ')'
})
var scatterPlot = vis.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
x : function(d) { return xScale(d.x) - r; },
y : function(d) { return yScale(d.y); },
width : r * 2,
height : r
});
var errorMin = vis.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
cx : function(d) { return xScale(d.x); },
cy : function(d) { return yScale(d.yMin); },
r : r
});
var errorMax = vis.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
x : function(d) { return xScale(d.x) - r; },
y : function(d) { return yScale(d.yMax); },
width : r * 2,
height : r * 2
});
下面是一个工作示例:
我非常确定,当我在代码末尾执行var errorMax=vis.selectAll('square')
时,它会告诉D3选择现有的方块,而不是附加新的方块,我确信有一种方法可以只附加新的方块,我只是不知道如何 .append('square')
=>.append('rect')
可以附加的预定义SVG形状
哇,谢谢你。真不敢相信是这么小的一个打字错误。
var errorMax = vis.selectAll('square')
.data(data)
.enter()
.append('rect')
.attr({
x : function(d) { return xScale(d.x) - r; },
y : function(d) { return yScale(d.yMax); },
width : r * 2,
height : r * 2
});