如何在动态填充的div上叠加动态选择的图像

Question

要求说明:

我使用d3解析.csv文件的数据,然后动态填充页面上的各种项目.一节如下所示:

我的代码进展:

• 我开始时将每个动态检索到的数字放在自己的div标签中,并动态设置每个背景图像.这是d3 JavaScript代码:

  careerstage_td.append("div")
  .text(function(d){ return d.count })
  .attr("class", "career-count")
  .style("color", function(d){return d.color;})
  .style("background-image", function(d){return "url('images/" + d.icon + "')";})
  .style("background-repeat", "no-repeat")
  .style("background-position", "center center");
  

  (请注意,我正在使用一个函数来动态填充数字以及确定要叠加的图像)

  这给了我以下预期结果,其中图像在文本后面:

• 下一步是弄清楚如何将背景图像叠加在文本之上.为此,我开始在谷歌上挖掘并在SO上找到这个问题:如何叠加图像.在这里我确定了两种不同的解决方案

  解决方案1 :(从该页面的顶部答案)在div中添加一个带有数字的跨度,然后使用css将跨度绝对放在中心,就像这样

  div.career-count span.stickperson
  {
      position:absolute;
      left:45%;
      top: 34%;
  }
  

  解决方案2 :(来自该页面上的另一个答案)添加以下用动态文本扩展div类的css,如下所示

  .career-count:after
  {
      content: url(/images/person_assoc.gif);
      position: absolute;
      left:45%;
      top: 34%;
  }
  

两种解决方案都有效,但解决方案1仅适用于Chrome,而解决方案2不允许我动态设置图像,因为它全部在css中完成,并且'after'contruct不能在线使用.

我很感激帮助找出一个允许我动态设置图像的解决方案,也适用于Chrome,Firefox 25和IE 11.

编辑:谢谢你的选票,伙计们.我现在添加了图片:)

Answer 1

实际上，我认为最好的解决方案不是向放置文本的元素添加背景图像div，而是为您创建的div每个元素创建一个子元素div，并使用子元素内的图像。

careerstage_td.selectAll('div')
    .data(dataset)
    .enter().append('div')
    .attr("class", "career-count")
    .text(function(d){return d;})
    .style("color", function(d){return d.color;})
    .append('div')
    .attr("class", "childClass")
    .style("background-image", function(d){return "url('images/" + d.icon + "')";})
    .style("background-repeat", "no-repeat")
    .style("background-position", "center center");

在给定的代码中，我根据数据生成了我的 div，并为每个divdiv 添加了一个新的div（类名“childClass”）。现在我可以在这个 childClass 上玩了。

请参阅 jsfiddle的示例。（请注意，我使用了简化的数据集，因此我始终将图像推为背景和相同的文本颜色）。

确保图标显示在父节点中间的技巧是将父节点position:relative和子节点的absolute宽度和高度定义为 100%。将背景集中在 x 和 y 上即可完成此任务。