javascript - 如何附加多个背景图像

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

The D3 convention is that callback functions are passed the element’s datum (typically called d), the element’s index (i), and the array of elements (nodes). The element itself is this.

所以传递一个回调函数作为.attr()的值到达绑定(bind)数据 (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));