javascript - d3 堆叠条鼠标悬停在整个条上

Question

我使用教程创建了堆叠条形图。堆栈是使用以下内容创建的:

var layers = d3.layout.stack()(["passed", "failed", "skipped"].map(function(cause){
        return data.map(function(d){
            return {x: d.UP, y: +d[cause]};
            });
        }));

当我将鼠标悬停在堆栈上时，我希望标记整个堆栈(例如，更强的边界线)。

我目前正在使用:

var barMouseOverFunction = function(d, i) {
    var bar = d3.select(this);
    bar.attr("stroke", "black" );

然而，这仅针对当前堆栈发生变化。关于如何获取堆栈中的所有条形图的任何想法？

编辑完整代码:

d3.json('db/data.php', function(data) {             


    var layers = d3.layout.stack()(["passed", "failed", "skipped"].map(function(cause){
        return data.map(function(d){
            return {x: d.UP, y: +d[cause]};
            });
        }));



    var n = 3, // number of layers
        stack = d3.layout.stack(),
        yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
        yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });




    var x = d3.scale.ordinal()
        .domain(data.map(function(d){return d.UP;}))
        .rangeRoundBands([0, width], .4);


    var y = d3.scale.linear()
        .domain([0, yStackMax])
        .range([height, 0]);

    var color = d3.scale.ordinal()
        .range(["#6ad46a", "#ed2828", "#fae650"]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickSize(0)
        .tickPadding(6)
        .orient("bottom");

        // Grid lines
    var gridcontainer = svg.append('g');
    gridcontainer.selectAll("line").data(y.ticks(10)).enter().append("line")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", y)
        .attr("y2", y)
        .style("stroke", "#87cbff")
        .style("stroke-width", .3);

    var layer = svg.selectAll(".layer")
        .data(layers)
      .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) { return color(i); })
        .style("stroke", function(d, i){return d3.rgb(color(i)).darker();});

    var timeformatter = d3.time.format("%b %e %Y %x%p");

    // On mouseover display test case information
    var barMouseOverFunction = function(d, i) {
        var bar = d3.select(this);
        bar.attr("stroke", "black" );

        var dataItem = data[i];
    }


    var barMouseOutFunction = function() {
        var bar = d3.select(this);
        bar.attr("stroke", function(d){
            return StatusColor(d.result);
        });

        d3.select("p").text("");
    }





    var rect = layer.selectAll("rect")
        .data(function(d) { return d; })
      .enter().append("rect")
        .attr("x", function(d) { return x(d.x); })
        .attr("y", height)
        .attr("width", x.rangeBand())
        .attr("height", 0)
        .attr("rx", 0.5)
        .attr("ry", 0.5)
        .on("mouseover", barMouseOverFunction)
        .on("mouseout", barMouseOutFunction);

Answer 1

执行此操作的最简单方法可能是为特定堆栈的条分配一个单独的类，然后基于该类进行选择，例如

var rect = layer.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("class", function(d, i, j) { return "stack" + j; })
...

var barMouseOverFunction = function(d, i, j) {
    d3.selectAll("rect.stack" + j).attr("stroke", "black");
    var dataItem = data[i];
}