尝试在 D3 中构建错误图表时出现问题

Question

我正在尝试使用 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: 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
    });

这是一个工作示例：http://jsfiddle.net/du37ep71/2/

我很确定当我在代码末尾执行 var errorMax = vis.selectAll('square') 时，它告诉 D3 select 现有的方块而不是添加新的方块，我确信有一种方法只是追加新的方块，我一直无法弄清楚如何。

Answer 1

.append('square') => .append('rect')

可以附加的预定义 SVG 形状

1. 矩形<rect>
2. 圆形<circle>
3. 椭圆<ellipse>
4. 行<line>
5. 折线<polyline>
6. 多边形<polygon>
7. 路径<path>

w3 source

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
});

Updated JSFiddle