Javascript 不生成D3的图像

这是我的问题。我的图表现在看起来是这样的：这真是太棒了。但是，我希望顶部的黑色方块中填充图片。幸运的是，我有一个CSS文件，其中有与类链接的图片。我还有一个包含所有类名的JSON文件。所有这些类名都分配给了正方形，我可以在Chrome上的inspect元素中看到图片。唯一的问题是这些图片没有出现在广场上。（我的轴也坏了，但这是第二个问题。）

这就是我分配类和创建矩形的地方

svg.selectAll(".div")
    .data(data.chartData, function(d){return d.vNm;})
    .enter().append("rect")
    .attr("x", function(d){
        return x(d.vNm);
    })
    .attr("y", function(d){
        return (y(d.values.reduce(function(sum, d){
            return sum + d.amount;
        }, 0))) - 64.5;
    })
    .attr("width", 43)
    .attr("height", 43)
    .attr("class", function(d){return d.vId;})
    .style("fill", function(d) { return segColor(d.data.type); });

---

解决问题的一种方法是对图表上方的图像使用

html

元素，如

div

，而不是

svg

元素，这样就可以充分利用css的功能

幸运的是，您不需要自己计算这些html元素的位置，有一些库可以帮助您将图像正确地定位在图表中的条形上方

例如，您可以为使用

d3.js

渲染的每个条调用其API：

 var popper = new Popper(barElement, onPopper, {
        placement: 'top'
    });

---

SVG元素不像典型的HTML元素那样遵循完全相同的CSS规则

在您的情况下，

背景图像

不起作用

实现此效果最简单的方法是在

之后嵌入

标记：

---

这意味着您必须修改JSON以在其中存储图像的base64数据，而不是CSS。

请向我们展示一些您的示例code@NoamHacker需要更多吗？@AlexeyAyzin您正在使用SVG，所以这是不可能的。通过CSS设置背景图像仅适用于“常规html”元素。因此，您必须对背景图像采用SVG方法（例如），或者您可以想出如何使用“常规html”来呈现图表。我可以使用poppers中的CSS图像吗？它们是常规html元素，因此任何CSS都可以处理它们。我如何为其分配类

<image width="100" height="100" xlink:href="data:image/png;base64,...">