D3v4堆叠式条形图工具提示 [英] D3v4 Stacked Barchart Tooltip

问题描述

我正在使用d3.stack()来创建标准化的堆叠条形图.
但是我无法访问Mousover工具提示的初始数据集的相关值.

I'm using d3.stack() to create a normalized stacked barchart.
But I'm having trouble accessing the relevant values of the inital dataset for a mousover tooltip.

serie.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
      ...
      .on("mousemove", function(d){
          let coords = d3.mouse(svg.node());
          tooltip.style("left", coords[0] + "px");
          tooltip.style("top", coords[1] - 70 + "px");
          tooltip.style("display", "inline-block");
          tooltip.html("HOW TO ACCESS DATA HERE?");
        });

d是此时的Array[2]，其值定义了基线/顶线，d.data是完整的原始数据对象，但缺少有关我当前正在徘徊的哪个堆栈的信息. > 理想情况下，我希望工具提示显示像{name:"item1", foo:10, bar:20}

d is the Array[2] at this point with the values defining baseline / topline, d.data is the complete original data object but is missing the information over which stack of the series I'm currently hovering.
Ideally I want the tooltip to show for a dataset like {name:"item1", foo:10, bar:20}

value: 10
percentage: 33%

当悬停在foo矩形上方时.
我发现的所有示例都是针对D3v3的，您可以简单地使用d.y来访问相关值，但是对于D3v4似乎不再起作用.

when hovering above the foo rect.
All the examples I've found are for D3v3 where you can simply use d.y to access the relevant value but that doesn't seem to work any more with D3v4.

推荐答案

您可以获取访问父级数据的元素名称，并使用该名称获取值:

You can get the name of the element accessing the parent's data, and using that name to get the value:

.on('mouseover', function(d, i) {
    var thisName = d3.select(this.parentNode).datum().key;
    var thisValue = d.data[thisName];
    var total = d.data.foo + d.data.bar;
    tooltip.html("Name: " + thisName + "<br>Value: " + thisValue + "<br>Percentage: " + thisValue / total + "%");
});

这是经过修改的代码:

var svg = d3.select("svg"),
    margin = {
        top: 20,
        right: 60,
        bottom: 30,
        left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1)
    .align(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);
var stack = d3.stack()
    .offset(d3.stackOffsetExpand);

var colors = ["#FF0000", "#00FF00", "#0000FF"];

var data = [{
    name: "item1",
    foo: 10,
    bar: 20
}, {
    name: "item2",
    foo: 50,
    bar: 50
}];

x.domain(data.map(function(d) {
    return d.name;
}));

var serie = g.selectAll(".serie")
    .data(stack.keys(["foo", "bar"])(data))
    .enter().append("g")
    .attr("class", "serie")
    .attr("fill", function(d, i) {
        return colors[i];
    });


var tooltip = d3.select('#tooltip');

var rects = serie.selectAll("rect")
    .data(function(d) {
        return d;
    })
    .enter().append("rect")

rects.attr("x", function(d) {
        return x(d.data.name);
    })
    .attr("y", function(d) {
        return y(d[1]);
    })
    .attr("height", function(d) {
        return y(d[0]) - y(d[1]);
    })
    .attr("width", x.bandwidth())
    .on('mouseover', function(d, i) {
        var thisName = d3.select(this.parentNode).datum().key;
        var thisValue = d.data[thisName];
        var total = d.data.foo + d.data.bar;
        tooltip.html("Name: " + thisName + "<br>Value: " + thisValue + "<br>Percentage: " + thisValue / total + "%");
    });

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(10, "%"));

<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="tooltip">tooltip</div>
<svg width="500" height="300"></svg>

这篇关于D3v4堆叠式条形图工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！