javascript - 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”元素并将矩形放置在每个相应的“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/