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

Posted 2023-02-22

【中文标题】堆栈图中选择条的 X 和 Y 坐标

【英文标题】：X & Y Co-ordinates of selective bars in a stack graph

【发布时间】：2013-12-22 12:27:51

【问题描述】：

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

类似这样的东西。

为此，我需要找到第二个和最后一个小节的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("测试") )

【问题讨论】：

这些条是否对应于第二个和最后一个数据项？如果是这样，你可以做bars.data(secondItem).attr("y")等。

我们需要使用firstItem、secondItem之类的吧？

不一定，这取决于您要如何准确识别这些条形。你能发布一个完整的工作示例吗？

看起来你应该可以直接从数据项中获取坐标——y(d.y1)。

我需要如何为那些选择性酒吧做这件事？运行y(d.y1) 将遍历数组中的所有数据。但在这里我需要使用second bar 和third bar。我该怎么做？

【参考方案1】：

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

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

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

【讨论】：

我卡在了另一个地方。我设法用你给我的code 画了一条线。我从第二个柱的y 值到最后一个柱的y 值画了一条线。但这条线只延伸到最后一根柱子的开始。但我希望将其扩展到最后一个栏的整个高度。请告诉我。

知道了。尝试使用y(0) 并延伸到栏的底部。