在群集条形图上使用居中svg图像

Question

我已将SVG图像附加到群集的条形图上，但需要将该图像置于两个值的中心。目前，它仅位于第一个值之下。

这里是我的fiddle任何想法如何做到这一点？我知道我可能会忽悠，但是在x属性中使用+30例如，但理想情况下，我可以强迫它居中放置。

svg.selectAll(".images")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + (x0(d.xx)) + ",0)"; })

      .selectAll("rect")
      .data(function(d) { return d.dataNew; })
        .enter()
      .append("svg:image")

       .attr("x", function(d) { return x1(d.xx )  } )
        .attr("y", height + margin.bottom-40)
        .attr("width", x1.rangeBand())
        .attr("height", 40)
       .attr("xlink:href", function(d){return "http://pngimg.com/uploads/football/football_PNG52789football_PNG52789.png"})

Answer 1

您需要的数学是：

.attr("transform", function(d) {
    return "translate(" + (x0(d.xx) + (x0.rangeBand() - x1.rangeBand()) / 2) + ",0)";
})

这是您的JSFiddle，进行的更改是：https://jsfiddle.net/4bsvr6y2/