Question

我试图将图像作为背景/填充图像加载到图上的节点上，每个节点都有自己的ID，并且存在一些端点，如果您解析ID，则会返回该特定节点的正确图像。

我想以这种方式解析节点ID并加载背景图片，与我发现的代码一起使用的唯一方法是，首先在包含URL的节点上附加一个“模式”，然后引用此模式当附加我的节点时。我不知道如何通过节点的ID进行迭代和执行此操作，该ID应该可以提取正确的图片！

代码：

addCircleNodes(onClick: (node: EngagementGraphNode) => void): void {
var img_url = `https://jimjamsDoughnuts/ID-12345/standard`
const circle = this.group
  .selectAll('circle.node')
  .data(this.nodes)
  .enter();
circle
  .append("pattern")
  .attr("id", "insightImage")
  .attr("patternContentUnits", "objectBoundingBox")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("x", 0)
  .attr("y", 0)
  .append("image")
  .attr("xlink:href", img_url)
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .attr('preserveAspectRatio', 'xMidYMid slice');
circle
  .filter(node => node.depth !== 0)
  .append('circle')
  .classed('Engagement-GraphNode', true)
  .classed('Engagement-GraphNodeBackground', true)
  .classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
  .style('fill', node => `url(#insightImage)`)
  .style('opacity', node => (node.visible) ? 1 : 0)
  .style('visibility', node => (node.visible) ? 'visible' : 'hidden')
  .on('click', node => onClick(node));

因此，目前的结果是我的每个节点都成功加载了相同的图像，我尝试了使用img_url和img_id的function（d）方法，但是我还没有弄清楚如何解析自己的node.id。因为我真正想做的是能够调用url并说“ jimjamsdoughnuts / node.id / standard”

可能类似于node =>“ jimjamddoughnuts $ {node.id} / standard” 但是在上面调用它是行不通的！它只有在我第一次添加模式之后才起作用，对于我的生命，我不知道为什么！

我在网上找到了该资源，该资源用于遍历元素并添加图像，但是我无法弄清楚如何将自己的node.id纳入其中：http://bl.ocks.org/SpaceActuary/25e72aadac28f2c87667816e82c609db

非常感谢您的帮助。

Answer 1

D3约定是将回调函数传递给元素的数据（通常称为 d ），元素的索引（ i ）和元素数组（节点）。元素本身是 this 。

因此，将回调函数作为.attr()的值传递，以到达绑定的基准（d）。一旦有了基准，就如同用d.someProperty返回形成的url字符串一样简单。

但是当您为每个<pattern>动态创建唯一的<circle>时，您需要为每个<pattern>赋予自己的唯一ID，然后使用引用该唯一的<pattern>它自己的唯一ID（否则，每个<circle>都由同一个静态<pattern>填充，或者您只是用相同的ID创建多个模式）。

addCircleNodes(onClick: (node: EngagementGraphNode) => void): void {
var img_url = `https://jimjamsDoughnuts/ID-12345/standard`
const circle = this.group
  .selectAll('circle.node')
  .data(this.nodes)
  .enter();
circle
  .append("pattern")
  .attr("id", d => `insightImage-${d.id}`)
  .attr("patternContentUnits", "objectBoundingBox")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("x", 0)
  .attr("y", 0)
  .append("image")
  .attr("xlink:href", d => `https://jimjamsDoughnuts/${d.id}/standard`)
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .attr('preserveAspectRatio', 'xMidYMid slice');
circle
  .filter(node => node.depth !== 0)
  .append('circle')
  .classed('Engagement-GraphNode', true)
  .classed('Engagement-GraphNodeBackground', true)
  .classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
  .style('fill', d => `url(#insightImage-${d.id})`)
  .style('opacity', node => (node.visible) ? 1 : 0)
  .style('visibility', node => (node.visible) ? 'visible' : 'hidden')
  .on('click', node => onClick(node));

如何附加多个背景图像

1 个答案: