이미지 블러오게 짠건데 맞는건가요?
본문
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);
선생님분들 혹시 이게 맞게 된건지 궁금합니다.
이미지가 불러오진 않습니다. ㅠㅠ
오류도 안나고 아무것도 안불러와요 ㅠㅠ
답변 3
이미지가 보이지 않는 가장 큰 이유는 아마 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);
.attr("xlink:href", function(d) {
return d.imageUrl;
})>
이런식이 더낮지않을까요?
그리고 함수정의는 페이지 스크립트로~~~
.attr("xlink:href", function(d) {
var imageUrl = "/img/kor.jpg";
return d.imageUrl;
})
d가 어디서 오는 건가요?
return "/img/kor.jpg";
이걸 원하시는 건가요?.
D3.js를 사용하여 SVG 요소의 xlink:href 속성에 값을 설정하는 방법 중 하나 입입니다
답변을 작성하시기 전에 로그인 해주세요.
