클릭하여 산점도 하이라이트 데이터를 만드는 방법

Question

안녕하세요, 동료 프로그래머 님

저는 대화 형 시각화를 2 개 만들려고합니다. 첫 번째는 사용자가 클릭 할 수있는 월드 맵입니다. 클릭 할 때마다 두 번째 시각화 인 산점도를 클릭하여 클릭 한 국가의 데이터를 표시하는 특정 원/점을 강조 표시합니다. 저 좀 도와 주 시겠어요? 지금까지 나는 국가를 클릭 할 때 국가 코드가 반환되는지 확인했습니다.

맵에의 코드 :

new Datamap({ 
    scope: 'world', 
    done: function(datamap) { 
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { 
     console.log(geography.id); 
    }); 
}, 
element: document.getElementById('container1'), 
fills: { 
    A: '#fdd0a2', 
    B: '#fdae6b', 
    C: '#fd8d3c', 
    D: '#f16913', 
    E: '#d94801', 
    F: '#a63603', 
    G: '#7f2704', 
    defaultFill: 'grey' 
}, 
geographyConfig: { 
    borderColor: 'rgba(255,255,255,0.3)', 
    highlightBorderColor: 'rgba(0,0,0,0.5)', 
    popupTemplate: function(geo, data) { 
     return data && data.GDP ? 
     '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong><br/>GDP: <strong> $ ' + data.GDP + '</strong></div>' : 
     '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong></div>'; 
    } 
}, 
data: { 
    "ABW": { 
     "country": "Aruba", 
     "fillKey": "No data", 
     "GDP": "No data" 
    }, 
    "AND": { 
     "country": "Andorra", 
     "fillKey": "No data", 
     "GDP": "No data" 
    }, 
    .... 

산점도 코드 : 데이터는 TSV 파일은 다음과 같은 구조를 가지고

function ScatterCorruption(){ 

// determine parameters 
var margin = {top: 20, right: 20, bottom: 200, left: 50}, 
    width = 600 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

// determine x scale 
var x = d3.scale.linear() 
.range([0, width]); 

// determine y scale 
var y = d3.scale.linear() 
.range([height, 0]); 

// determine x-axis 
var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom"); 

// determine y-axis 
var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left"); 

// make svg 
var svg = d3.select("body").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// load in data 
d3.tsv("ScatCor.txt", function(error, data) { 
    if (error) throw error; 

    // convert data 
    data.forEach(function(d) { 

    d.GDP = +d.GDP; 
    d.Variable = +d.Variable; 
    }); 

    // extract the x labels for the axis and scale domain 
    // var xLabels = data.map(function (d) { return d['GDP']; }) 

    // x and y labels 
    x.domain(d3.extent(data, function(d) { return d.GDP; })); 
    y.domain(d3.extent(data, function(d) { return d.Variable; })); 

    // make x-axis 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.5em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-40)") 

    // make x-axis label 
    svg.append("text") 
    .attr("x", (width -20)) 
    .attr("y", height - 5) 
    .attr("class", "text-label") 
    .attr("text-anchor", "end") 
    .text("GDP"); 

    // make y-axis 
    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("class", "label") 
    .attr("transform", "rotate(-90)") 
    .attr("y", -40) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("corruption points") 

    // make dots 
    svg.selectAll(".dot") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", "dot") 
    .attr("r", 2.5) 
    .attr("cx", function(d) { return x(d.GDP); }) 
    .attr("cy", function(d) { return y(d.Variable); }); 

    // chart title 
    svg.append("text") 
    .attr("x", (width + (margin.left + margin.right))/ 2) 
    .attr("y", 0) 
    .attr("text-anchor", "middle") 
    .style("font-size", "16px") 
    .style("font-family", "sans-serif") 
    .text("Corruption"); 
} 

:

Country Name CountryCode GDP Variable 
Gambia GMB 850902397.34 72 
Guinea-Bissau GNB 1022371991.53 83 
Timor-Leste TLS 1417000000.00 72 
Seychelles SYC 1422608276.1 45 
Liberia LBR 2013000000.00 63 

어떤 도움이 것 크게 감사드립니다!

감사

Answer 1

빠른 옵션은 circle-class 또는 id 속성으로 국가 코드를 추가하는 것입니다. 이

// make dots 
svg.selectAll(".dot") 
    .data(data) 
    .enter().append("circle") 
    .attr("class", function(d) { return x(d.CountryCode) + " dot"; }) // <--- See this line 
    .attr("r", 2.5) 
    .attr("cx", function(d) { return x(d.GDP); }) 
    .attr("cy", function(d) { return y(d.Variable); }); 

같은

뭔가 지금, 당신은 당신이 또 다른 클래스를 설정하거나 직접 색상 스타일을 추가 반환 countryCode와 사용 할 수 있습니다.

var highlightData = function(country){ 
    // remove any highlights 
    d3.selectAll('.dot').classed('active', false); 
    d3.select('.' + country).classed('active',true); 
} 

지금 당신이 필요로하는 모든 당신은 또한 g 태그에 스타일을 적용하고 활성 데이터 포인트로 더 많은 일을 할 수

.dot.active { 
    fill: #bada55; 
} 

강조 표시된 점에 대해 당신이 원하는 모양을 적용 할 몇 가지 스타일이다 .