根据 D3 中的当前值更改 html 属性答案

【问题标题】：Changing an html attribute based on its current value in D3根据 D3 中的当前值更改 html 属性
【发布时间】：2014-06-24 09:20:39
【问题描述】：

我觉得我正在尝试做一些相当简单的事情，但我似乎无法弄清楚如何做。我有一个显示几个条形图的页面，我正在尝试构建一个按钮，使某些条形出现和消失。条有标签，当按钮被切换时，我希望一半的条消失，其余条的大小加倍，条的标签向下移动一点。

我正在使用 D3.js 绘制图表，除了这些小标签之外，我几乎可以完成所有工作。我要做的只是将它们的“y”属性增加大约 15 个像素，但我似乎无法在更改之前找到一种方法来请求这个值！

一开始我以为

d3.selectAll(".bar-value-label").attr("y", function(d,i){ return d + 15;})

应该可以。然而，当我记录这个“d”是什么时，它原来是对最初用于创建这个元素的数据对象的引用。

所以，基本上我只是想找到一种方法来获取当前值并减少或减少它。在 D3 中有没有很好的方法来做到这一点？

问候，莱纳斯

编辑：好的，所以我找到了一种可行的方法。我很怀疑这是最好/最有效的方法，所以仍然非常欢迎回答:)

            var resp_labels = d3.selectAll(".bar-value-label-resp")[0];
            resp_labels.forEach(function(d,i){
              var old_y = parseFloat(d.getAttribute("y"));
              d3.select(d).transition().attr("y", function(i){ return old_y - barheight/4 ;});
            });

【问题讨论】：

标签： javascript html d3.js

【解决方案1】：

我没有机会检查它是否有效，但我认为这是您解决方案的略微简化版本：

var resp_label = d3.select(".bar-value-label-resp");
var old_y = +resp_label.attr("y");
resp_label.transition().attr("y", old_y - barheight/4);

【讨论】：