Question

我正在尝试使用spgsesheet为imgs创建一个带有国家标志的d3力图。

我想我仍然很难在语法上理解d3。我打算使用来自css标志类的背景图像，然后子图像将具有背景位置。但是，在类中添加img，如：

var nodesDrawn = d3
  .select("#container")
  .selectAll("img")
    .data(nodesData)
    .enter()
    .append("img")
    .attr('class', function(d){return "flag flag-"+d.code;})
    ;

生成图像，但不适用于力图... force nodes without links

或者我已经生成了图形本身，并且确实有节点可以工作，但不能使用图像而不是svg圆圈...... force links without nodes

var nodesDrawn = svg
  .append("g")
  .selectAll("img")
    .data(nodesData)
    .enter()
    .append("img")
    .attr('class', function(d){return "flag flag-"+d.code;})
    ;

你可以看到链接而不是节点，我试图将节点附加到svg，而工作图像直接附加到主体。任何人都可以帮我理解这是如何工作的吗？

Answer 1

svg是一个HTML标记，您正在构建的图表是SVG。一旦您开始在页面上的img标记内工作，您就会处理SVG elements，而不是HTML元素。

但你可以

使用foreignObject tag
使用{{1}}标记的SVG等效项，即image tag

将imgs附加到d3强制图

1 个答案: