不生成 D3 的图像答案

【问题标题】：Images not Generating D3不生成 D3 的图像
【发布时间】：2016-05-19 20:08:54
【问题描述】：

这是我的问题。我的图表目前看起来像这样：这是花花公子。但是，我希望顶部的黑色方块充满图片。幸运的是，我有一个 CSS 文件，其中包含与类链接的图片。我还有一个包含所有类名的 JSON 文件。所有这些类名都分配给方块，我可以在 Chrome 的检查元素中看到图片。唯一的问题是图片没有出现在广场上。（我的轴也坏了，但这是次要问题）。 CSS, JSON

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

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

【问题讨论】：

请向我们展示一些您的代码示例
@NoamHacker 你需要更多吗？
@AlexeyAyzin 您正在使用 SVG，所以这是不可能的。通过 CSS 设置背景图像仅适用于“常规 html”元素。因此，要么您必须采用 SVG 方法来处理背景图像（例如 like this），要么您可以弄清楚如何使用“常规 html”来呈现图表。

标签： javascript css json d3.js

【解决方案1】：

解决问题的一种方法是在图表上方的图像中使用html 元素，例如div，而不是svg 元素，这样你就可以充分利用css。

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

例如查看https://popper.js.org/，您可以为使用d3.js渲染的每个bar调用它的API：

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

【讨论】：

我可以在 poppers 中使用 CSS 图像吗？
它们是常规的 html 元素，因此任何 css 都可以对它们起作用。
我将如何为它分配一个类

【解决方案2】：

SVG 元素不遵循与典型 HTML 元素完全相同的 CSS 规则。

在你的情况下，background-image 不起作用。

实现效果最不痛苦的方法是在<rect>之后嵌入一个<image>标签：

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

这意味着你必须修改你的 JSON 来存储图片的 base64 数据而不是 CSS。

【讨论】：