그누보드 QA - 이미지 블러오게 짠건데 맞는건가요?

이미지 블러오게 짠건데 맞는건가요?

2023.08.02 20:26:57 973 (61.♡.♡.181)

본문


    nodeGroup.append("svg:image")
      .attr('y', 2 + attrs.nodePadding)
      .attr('x', attrs.nodePadding)
      .attr('preserveAspectRatio', 'none')
      .attr('width', dynamic.nodeImageWidth)
      .attr('height', dynamic.nodeImageHeight - 4)
      .attr('clip-path', "url(#clip)")
      .attr("xlink:href", function(d) {
        var imageUrl = "/img/kor.jpg";
        return d.imageUrl;
      })
      .call(wrap, attrs.nodeWidth);

선생님분들 혹시 이게 맞게 된건지 궁금합니다.

이미지가 불러오진 않습니다. ㅠㅠ

오류도 안나고 아무것도 안불러와요 ㅠㅠ

#javascript

답변 3

웹메이킹 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-08-02 22:39:51 39.♡.♡.46

이미지가 보이지 않는 가장 큰 이유는 아마 d.imageUrl에서 올바른 이미지 URL을 가져오지 못하는 것일 수 있습니다. d.imageUrl에 대한 값이 이미지 URL을 가지고 있어야 해당 노드의 이미지가 정상적으로 불러와 지기때문에 이미지 URL이 정확한지 확인하고 필요한 경우 해당 값을 설정해주어야 할것 같습니다.

예를 들어, 노드 데이터에 imageUrl 필드가 있다고 가정하고 각 노드에 대해 이미지 URL을 설정을 하시면 될 것 같습니다.

아래의 코드를 참고 하셔서 원하시는 로직으로 구현하시면 되지 않을까 합니다.


var nodeData = [
  { id: 1, name: "Node 1", imageUrl: "/img/kor.jpg" },
  { id: 2, name: "Node 2", imageUrl: "/img/usa.jpg" },
  // ...
];
var nodeGroup = svg.selectAll(".node")
  .data(nodeData)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
nodeGroup.append("svg:image")
  .attr('y', 2 + attrs.nodePadding)
  .attr('x', attrs.nodePadding)
  .attr('preserveAspectRatio', 'none')
  .attr('width', dynamic.nodeImageWidth)
  .attr('height', dynamic.nodeImageHeight - 4)
  .attr('clip-path', "url(#clip)")
  .attr("xlink:href", function(d) {
    return d.imageUrl; // 노드 데이터의 imageUrl 값을 가져옵니다.
  })
  .call(wrap, attrs.nodeWidth);