Как добавить несколько фоновых изображений

Question

Я пытаюсь загрузить изображения в качестве фона / заливки на моих узлах на графике, каждый узел имеет свой собственный идентификатор, и существуют конечные точки, которые, если вы анализируете идентификатор, вернут правильное изображение для этого конкретного узла.

Я хочу проанализировать идентификатор узла и загрузить фоновое изображение таким образом. Единственный метод, который работает с моим кодом, который я нашел, - это сначала добавить «шаблон» на мои узлы, содержащий URL, а затем ссылаться на него, когдадобавляя мои узлы.Я не могу понять, как я могу выполнить итерацию и сделать это по идентификатору моих узлов, этот идентификатор должен вытянуть правильное изображение!

код:

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

Итак, на данный моментВ результате каждый из моих узлов успешно загружает одно и то же изображение. Я попробовал метод function (d) с img_url и img_id, но я не понял, как проанализировать свой собственный 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).Когда у вас есть данные, это так же просто, как вернуть сформированную строку URL с d.someProperty.

Но поскольку вы динамически создаете уникальный <pattern> для каждого <circle>, вам нужно дать каждому <pattern> это собственный уникальный идентификатор, а затем ссылка на этот уникальный <pattern> с использованием собственного уникального идентификатора (в противном случае каждый <circle> заполняется одним и тем же статическим <pattern>, ИЛИ вы просто создаете несколько шаблонов с одним и тем же идентификатором).

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