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/