d3.js为每个数据点创建两个元素

Question

我想在每个条的后面添加另一个rect元素，但我努力做到这一点，因为d3.js不允许为每个数据点添加另一个元素。

http://jsfiddle.net/g5hpwf0m/2/

var w = parseInt(d3.select(self).style("width")), 
    h = parseInt(d3.select(self).style("height")), 

    svg = d3.select(self) 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h), 

    yScale = d3.scale.linear() 
      .domain([0, d3.max(dataset)]) 
      .range([0,h]); 

svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("fill", "green") 
     .attr("x", function(d, i) { 
      return i * (w/dataset.length); 
     }) 
     .attr("y", function(d) { 
      return h - yScale(d); 
     }) 
     .attr("width", w/dataset.length - barPadding) 
     .attr("height", function(d){return yScale(d);}); 

我尝试添加这一点，但它不会做任何事情。

svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("fill", "black") 
     .attr("x", function(d, i) { 
      return i * (w/dataset.length); 
     }) 
     .attr("y", function(d) { 
      return h - yScale(d); 
     }) 
     .attr("width", w/dataset.length - barPadding) 
     .attr("height", "100%"); 

Answer 1

您可能想要创建一个'g'元素并将rects放置在每个各自的'g'元素下。

var toprects = svg.append('g').attr('class','toprect'); 
var bottomrects = svg.append('g').attr('class','bottomrect'); 

bottomrects.selectAll("rect").... 
toprects.selectAll("rect").... 

http://jsfiddle.net/ermineia/g5hpwf0m/3/