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

然而，这只会改变当前的堆栈。关于如何获得堆栈中所有条形的任何想法？

编辑FULLCODE：

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

d3堆叠条形鼠标在整个条形图上

1 个答案: