Question

我觉得我试图做一些相当简单的事情，但我似乎无法弄明白。我有一个页面显示几个条形图，我试图建立一个按钮，使某些条形显示和消失。条形图有标签，当按钮被切换时，我想要一半的条纹消失，剩下的条形图尺寸加倍，条形图标签向下移动一点。

我正在使用D3.js绘制我的图表，除了这些小标签之外，我几乎所有工作都在工作。我试图做的就是增加他们的＆＃34; y＆＃34;属性约15像素，但我似乎无法在更改之前找到一种方法来请求此值！

最初我想过

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

应该有效。但是，当我记录下这个＆＃34; d＆＃34;是的，它原来是对最初用于创建此元素的数据对象的引用。

所以，基本上我只是想找到一种方法来获取当前值并在其中输入或减少它。在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 ;});
            });

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

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

1 个答案: