는 D3를 사용하는 나는 비교적 새로운 오전

다른 모든 요소를 숨 깁니다 D3의 클릭 이벤트를 설정하지만, 내가 뭘하려고 몇 가지 사이트 트래픽의 화음 다이어그램을, 그리고 나는 변경하여 대화 형 만들려고 노력하고 있어요 사용자가 특정 site.here에 대한 그룹 클릭 경로의 색상은 내 코드의 스타일과 스크립트 섹션 :는 D3를 사용하는 나는 비교적 새로운 오전

<style type="text/css"> 

.group text { 
    font: 11px sans-serif; 
    pointer-events: none; 
} 

#circle circle { 
fill: none; 
pointer-events: all; 
} 
.group path { 
    stroke: #000; 
    fill-opacity: .5; 
} 

path.chord { 
    stroke-width: .75; 
    fill-opacity: .75; 
} 

#circle:hover path.fade { 
display: none; 
} 
</style> 
</head> 

<body> 
<script type="text/javascript"> 



// Chart dimensions. 
var w = 600, 
h = 700, 
r1 = Math.min(w, h)/2 - 4, 
r0 = r1 - 20, 
format = d3.format(",.3r"); 

// Square matrices, asynchronously loaded; credits is the transpose of sitename. 
var sitename = []; 

// The chord layout, for computing the angles of chords and groups. 
var layout = d3.layout.chord() 
.sortGroups(d3.descending) 
.sortSubgroups(d3.descending) 
.sortChords(d3.descending) 
.padding(.04); 

// The color scale, for different categories of "worrisome" risk. 
var fill = d3.scale.ordinal(); 

// The arc generator, for the groups. 
var arc = d3.svg.arc() 
.innerRadius(r0) 
.outerRadius(r1); 

// The chord generator (quadratic Bézier), for the chords. 
var chord = d3.svg.chord() 
.radius(r0); 

// Add an SVG element for each diagram, and translate the origin to the center. 
var svg = d3.select("body").selectAll("div") 
.data([sitename]) 
.enter().append("div") 
.style("display", "inline-block") 
.style("width", w + "px") 
.style("height", h + "px") 
.append("svg:svg") 
.attr("width", w) 
.attr("height", h) 
.append("svg:g") 
.attr("transform", "translate(" + w/2 + "," + h/2 + ")"); 

// Load our data file… 
d3.csv("data2.csv", function(data) { 
var uniqueids = {}, 
    array = [], 
    n = 0; 

// Compute a unique id for each site. 
data.forEach(function(d) { 
d.siteid1 = uniqueIDMaker(d.siteid1); 
d.siteid2 = uniqueIDMaker(d.siteid2); 
d.valueOf = value; // convert object to number implicitly 
}); 


// Initialize a square matrix of sitename and users 
for (var i = 0; i < n; i++) { 
sitename[i] = []; 
for (var j = 0; j < n; j++) { 
    sitename[i][j] = 0; 
} 
} 

// Populate the matrices, and stash a map from id to site. 
data.forEach(function(d) { 
sitename[d.siteid1.id][d.siteid2.id] = d; 
array[d.siteid1.id] = d.siteid1; 
array[d.siteid2.id] = d.siteid2; 
}); 

// For each diagram… 
svg.each(function(matrix, j) { 
var svg = d3.select(this); 

// Compute the chord layout. 
layout.matrix(matrix); 

// Add chords. 
svg.selectAll(".chord") 
    .data(layout.chords) 
    .enter().append("svg:path") 
    .attr("class", "chord") 
    .style("fill", function(d) { return fill(d.source.value); }) 
    .style("stroke", function(d) { return d3.rgb(fill(d.source.value)).darker(); }) 
    .attr("d", chord) 
    .on("dblclick",function(){ 
     d3.select(this) 
     .style("fill","red") 
     .style("stroke","yellow") 
    }) 
    .append("svg:title") 
    .text(function(d) { return "site " + d.source.value.siteid2.name + " and site " + d.source.value.siteid1.name + " have " + format(d.source.value) + " common users"; }) 
    ; 

// Add groups. 
var g = svg.selectAll("g.group") 
    .data(layout.groups) 
    .enter().append("svg:g") 
    .attr("class", "group"); 

// Add the group arc. 
g.append("svg:path") 
    .style("fill", function(d) { return fill(array[d.index]); }) 
    .attr("id", function(d, i) { return "group" + d.index + "-" + j; }) 
    .attr("d", arc) 

    .append("svg:title") 
    .text(function(d) { return "site " + array[d.index].name + " has " + format(d.value) + "users"; }); 

g.append("svg:text") 
    .attr("x", 6) 
    .attr("dy", 15) 
    .filter(function(d) { return d.value > 110; }) 
    .append("svg:textPath") 
    .attr("xlink:href", function(d) { return "#group" + d.index + "-" + j; }) 
    .text(function(d) { return array[d.index].name; }); 
}); 

function uniqueIDMaker(d) { 
return uniqueids[d] || (uniqueids[d] = { 
    name: d, 
    id: n++ 
}); 
} 

function value() { 
return +this.count; 
}}); 

</script>

어떤 도움을 크게

http://jsfiddle.net/Rw3aK/2/이의 jsFiddle이다 주시면 감사하겠습니다 스크립트에서 파일에서 읽는 방법을 모르므로 data2.csv의 내용은 다음과 같습니다.

012 3,516,

siteid1, siteid2, 카운트 pubid1, pubid2

8,94,11132,57141,57141

201,94,10035,57141,57141

201,8,9873,57141,57141

094848845020,57141

08825845020,57141

0201764445020,57141

0169734502045020

94,1,5719,57141,45020

8,1,56705714145020

1,20154105714145020

출처

2013-11-09 user2973556

당신은 진짜/예를 들어 데이터로 작업 [jsfiddle] (http://jsfiddle.net/)를 게시 할 수 있을까요? 그러면 문제를 간단하게 식별 할 수 있습니다. – mdml

attr을 사용하여 스타일을 전환 해 보았습니까? jsfiddle이 없으면 무엇이 잘못 될 수 있는지 알려주는 것이 약간 어렵습니다. – tomtomtom

파일에서 입력을 받아들이도록 jsFiddle을 어떻게 설정합니까? – user2973556

나는 당신의 jsfiddle을 포크와 변수 data 지금, JSON에 CSV 데이터를 변환 : http://jsfiddle.net/mdml/K6FHW/.

또한 코드를 약간 수정하여 그룹을 클릭 할 때 모두 코드가 빨간색으로 강조 표시되도록합니다. 그룹을 다시 클릭하면 코드가 원래 색상으로 다시 변경됩니다. 관련 조각을 바로 여기에 다음 코드를 추가 할 때

는 코드의 소스

svg.selectAll(".chord") 
    .data(layout.chords) 
    .enter().append("svg:path") 
    .attr("class", function(d){ return "chord chord-" + d.source.index; }) 

...

그룹을 클릭하면 해당 그룹의 코드가 강조되어 있는지 확인에 따라 클래스와 각 코드 레이블을 붙입니다.

그렇다면, 그룹의 코드가 변수 d.chordHighlighted

g.append("svg:path") 
... 
    .attr("id", function (d, i) { 
     return "group" + d.index + "-" + j; 
    }) 
... 
    .on("click", function(d){ 
     if (d.chordHighlighted) 
      d3.selectAll(".chord-" + d.index) 
       .style("fill", fill(d.value)); 
     else{ 
      d3.selectAll(".chord-" + d.index) 
       .style("fill", "red"); 
     } 
     d.chordHighlighted = d.chordHighlighted ? false : true; 
    })

빨간색 코드를 작성 기본 색상
그렇지 않은 경우와 화음을 채우기

출처

2013-11-09 20:59:31 mdml

감사합니다. – user2973556

는 D3를 사용하는 나는 비교적 새로운 오전

답변

관련 문제