堆栈图中选择条的 X 和 Y 坐标

Question

我有一个堆积条形图。我想画一条线，就像对堆积条形图的几个条形图进行分组一样。

类似这样的东西。

为此，我需要找到第二个和最后一个小节的y 坐标。

请有人帮助使用 d3 绘制这些线。

JS：

变量宽度 = 750， 高度 = 500； var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .rangeRound([高度, 0]); var color = d3.scale.ordinal() .range(["#D70B16", "#154CEF", "#1A8A55"]); var xAxis = d3.svg.axis() .scale(x) .orient("底部"); var yAxis = d3.svg.axis() .scale(y) .orient("左") .tickFormat(d3.format(".2s")); var 提示 = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html（函数（d）{ 返回“值：”+（d.y1-d.y0）+“”； }) var svgContainer = d3.select("body") .append("svg") .attr("宽度", 宽度) .attr（“高度”，高度） .append("g") .attr("变换", "翻译(" + 30 + "," + 30 + ")"); d3.csv("data.csv", function(error, data) { color.domain(d3.keys(data[0]).filter(function(key) { return key !== "circle"; })); data.forEach（函数（d）{ 变量 y0 = 0; d.hours = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); d3.select('body').append('pre') .text(JSON.stringify(d.hours, null, ' ')); d.total = d.hours[d.hours.length - 1].y1; }); x.domain(data.map(function(d) {return d.circle;})); y.domain([0, d3.max(data, function(d) {return d.total;})]) svgContainer.append("g") .attr("类", "x 轴") .attr("变换", "翻译(0," + 高度 + ")") .call(xAxis); svgContainer.append("g") .attr("类", "y 轴") .call(yAxis) .append("文本") .attr("变换", "旋转(-90)") .attr("y", 6) .attr("dy", ".71em") .style("文本锚", "结束") .text("登录时间"); var circle = svgContainer.selectAll(".circle") .data（数据） .enter().append("g") .attr("类", "g") .attr("变换", function(d) { return "translate(" + x(d.circle) + ",0)"; }); circle.selectAll("矩形") .data(function(d) { return d.hours; }) 。进入（） .append("矩形") .attr("宽度", x.rangeBand()) .attr("y", function(d) { return y(d.y1); }) .attr("高度", function(d) { return y(d.y0) - y(d.y1); }) .on("鼠标悬停", tip.show) .on("mouseout", tip.hide) .style("fill", function(d) { return color(d.name); }); circle.selectAll("文本") .data(function(d) { return d.hours; }) 。进入（） .append("文本") .attr("x", 75) .attr("y", function(d, i) { return y(d.y1) ; }) .style("文本锚", "中间") .text("测试") })

Answer 1

您如何确定这些值（和条形）取决于您如何识别它们。在这种特殊情况下，您实际上不需要获取 rect 项目，因为基础数据使您可以访问所需的一切。

例如要获取第一列第二个条的y坐标，可以使用如下代码：

var yCoord = y(data[0].hours[1].y1);