d3.js의 .data() 함수를 사용하여 이미 화면에 그려져있는 특정 Svg 서클의 CX & cy 특성에 액세스하려고하는데 아무도 도와 줄 수 있습니까? 액세스하려는 코드는 다음과 같습니다.데이텀에서 d3.js 요소 속성에 액세스 하시겠습니까?
d3.selectAll(".mynode").each(function(d, i){
if(d.someId == targetId){
console.log(d.attr("cx")); // just trying to demo my point, doesn't work
}
}
나는 & 자바 스크립트를 d3.js 아주 새로운, 그래서 난 어쨌든 앞이 다시 접근하고있어 있는지 확실하지 않습니다 혹은 내가 붙박이 솔루션을 놓친?
귀하의 코드가 무엇을 당신이 정말로 원하는 것은에서와 같이, SVG DOM 요소에서 해당 속성을 얻을 수있는 데이터의 항목에서 SVG 속성을 얻기 위해 노력하고있다 :
console.log(d3.selectAll(".mynode").attr("cx"));
것은이는 당신에게 줄 것이다 선택 범위의 최초의 null 이외의 요소의 속성.
d3.selectAll(".mynode").each(function(d, i){
if(d.someId == targetId){
console.log(d3.select(this).attr("cx"));
}
}
this를 사용하려는 경우,
console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx"));
또는 당신은 또한 filter DOM 요소를 얻기 위해 당신의 선택을 찾고 있습니다
이전에'd3.select (this) .attr ("cx")'를 사용하고 있었지만'null'을 반환하고 있었고 결국에는 svg 그룹 요소 (doh!)의'cx' 속성을 요청했습니다. 그룹 요소 내 원 요소에 액세스하려면'd3.select (this.firstChild) .attr ("cx")'로 수정해야하며 firstChild/lastChild 등을 사용하는 것을 좋아하지는 않지만 지금은 작동합니다. . 또한 당신이 그것을 제안하지 않았다면 나는 필터 방법에 대해 생각하지 않았을 것입니다, 나는 아직도 특정 datum 값을 검색하는 동안 그것을 구현하는 방법에 대해 확신하지 못합니다. 그러나 고마워요! –
또한 명령 체인에서 일찍 액세스하려고 시도하고 특정 값이 아직 설정되지 않은 경우 null을 반환 할 수 있다고 덧붙입니다. – greg
허용 된 대답의 필터 방법이 정확합니다. 허용 된 대답 (.each 사용)에서 두 번째 접근법은 정확하지 않으며 questioner가 작성한 것과 동일한 오류가 있습니다. .data()가 호출되지 않으면 (여기서는이 경우) 첫 번째 인수 d가. each (자신을 포함한 모든 초보자가 기대할 수있는 것처럼 "현재의 dom 노드"가 아니라) 정의되지 않을 것입니다. 아주 마지막에 if 문 안에서 올바른 d3.select (this)를 통해 얻은 현재 dom 노드 - if 테스트 조건에 오류가 있습니다. 올바른 버전은 다음과 같습니다.
d3.selectAll(".mynode").each(function(d,i){
var elt = d3.select(this);
if (elt.attr("id") == "yourTargetIdGoesHere"){
console.log(elt.attr("cx"));
}
});
바이올린 : fiddle (두 버전, 즉 필터와 각각 포함 코드)
UPDATE : 코드를 제공하지 않았기 때문에 내 대답은) 당신이 .DATA를 (사용하지 않은 것으로 가정했다 그에 대한; 나중에 나는 당신이 당신의 데이터 구조에 따라 평범한 d.cx로 d.attr ("cx")를 대체하면 .data()
을 사용했다고 썼다.
d.cx를 사용해 보셨습니까? d3.selectAll (". mynode")에서 .data를 호출하고 cx 필드가있는 데이터가 포함 된 객체에 대한 인수가 작동해야합니다. – mathheadinclouds