데이터 세트의 링크를 사용하여 원 안에 이미지를 배치하는 방법을 파악하는 데 어려움을 겪고 있습니다. 노드에 이미지를 추가하려면 패턴이 필요하다는 것을 알고 있습니다 .이 주제에 대한 관련 SO 질문은 노드와 데이터를 도입하기 전에 정의, 패턴 및 이미지 요소를 추가합니다.
제 경우에는 데이터가 각 노드에 동적으로 추가되기 때문에 선택기 함수 내에 태그를 추가하는 방법을 찾을 수 없었습니다. 다음은 프로젝트에 대한 코드입니다. 각 검은 색 점은 곤충의 다른 이미지를 포함해야합니다 (URL은 tsv 파일에 있음) : https://plnkr.co/edit/Ydrxogbfm9JvqrgeQaQ6?p=preview
xlink:href아래 코드로 본문 태그를 변경해 보았습니다 .
<body>
<svg width="1000" height="600">
<defs id="mdef">
<pattern id="image" x="0" y="0" height="40" width="40">
<image x="0" y="0" width="40" height="40" ></image>
</pattern>
</defs>
</svg>
</body>
그리고 노드를 추가하는 코드 블록 내의이 JS 스 니펫. :
.attr('"xlink:href", function(d){return d[1];}) //d is an array and the d[1] is the link
그러나 이미지는 나타나지 않았습니다. 그런 다음 js를 사용하여 패턴을 추가해 보았습니다.
for (i=0;i<insects.length;i++){
g.selectAll("circle")
.data(insects[i],function(d) {console.log(d); return d }) //each insect
.enter().append("circle")
.attr('cx', function(d,index) {return x(insects[i].length)/insects[i].length*index; })
.attr("r", 20)
.attr("cy", function(d,index){return y.bandwidth()*i})
.append('svg:defs') //adding pattern
.append('svg:pattern')
.attr('id','pattern')
.attr("x",0)
.attr("y",0)
.attr("width",40)
.attr("height",40)
.append("svg:image")
.attr("x",0)
.attr("y",0)
.attr("width",40)
.attr("height",40)
.attr("xlink:href", function(d){console.log(d[1]); return d[1];})
.style("fill", "url(#pattern)");
}
})
그러나 나는 같은 결과를 얻습니다. 내가 d3의 초보자이기 때문에 어떤 포인터라도 정말 감사하겠습니다. 즐거운 휴일
<defs>, a <pattern>및 a <image>를 원에 추가 할 수 없습니다 . 작동하지 않습니다.
그 대신을 만들고 <defs>패턴과 이미지를 추가 한 다음 고유 ID에 따라 원을 채워야합니다.
var defs = g.append("defs");
defs.selectAll(".patterns")
.data(insects[i], function(d) {
return d
})
.enter().append("pattern")
.attr("id", function(d) {
return "insect" + (d[0].split(" ").join(""))
})
.attr("width", 1)
.attr("height", 1)
.append("svg:image")
.attr("xlink:href", function(d) {
return d[1]
})
.attr("width", 40)
.attr("height", 40);
g.selectAll("circle")
.data(insects[i], function(d) {
return d
})
.enter().append("circle")
.attr('cx', function(d, index) {
return x(insects[i].length) / insects[i].length * index;
})
.attr("r", 20)
.attr("cy", function(d, index) {
return y.bandwidth() * i
})
.style("fill", function(d) {
return "url(#insect" + (d[0].split(" ").join("")) + ")"
});
}
업데이트 된 플 런커는 다음과 같습니다 : http://plnkr.co/edit/WLC2ihpzsjDUgcuu910O?p=preview
추신 : 귀하의 코드는 작동하지만 D3 데이터 시각화에서는 for 루프가 불필요하고 어색하다고 말해야합니다. 이것은 데이터에 액세스하는 D3 방식 이 아닙니다 . 따라서 해당 블록에서 코드를 완전히 리팩토링하는 것이 좋습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다