在 d3 选择方法链接中，如何引用所选元素的值？

Question

我有一个简单的水平条形图，我试图在每个水平条的左侧放置一个图像作为条形的标签。

此时在脚本中，条形图已创建并显示出来。

我已经获取了一个代码示例，用于将标签添加到条形的右侧（包含在图像中），并尝试对其进行更新以将图像放置在左侧。

    bars.append("image")
        .attr("class", "bar_image")
        //y position of the image is halfway down the bar
        .attr("y", function(d){
            return y(d.Candidate) + y.rangeBand() / 2 + 4;
        })
        //x position to left of bar
        .attr("x", function(d) {
            return -10;
        })
        .attr('xlink:href', function(d){
            return "/static/images/yang.png";
        })

我在这里的理解是，我正在选择每个“条形”元素并附加一个图像（在我进行放置时，现在所有的图像都是相同的）。

我将图像元素的 y 属性设置为每个 y 范围的中间值。这就是右侧标签设置 y 属性的方式。 x，现在我只是设置在栏的左侧。然后我将实际的href设置为图像。

我现在的问题与调整图像大小有关，我希望能够根据“条形”元素的高度动态设置其高度/宽度。这些高度显然取决于有多少条柱（此图应按比例放大或缩小到任意数量的人）

显然定位并不完美，但现在我很高兴能够根据图表中条形的高度调整图像的高度/宽度属性。

有没有办法在选择和方法中引用被选择元素的属性？

感谢您的帮助。

Answer 1

不完全是我想要的，但我可以设置

attr("height", x)

使用设置条形高度属性的相同函数的图像元素

.attr("height", y.rangeBand())