如何使散點圖突出顯示數據點擊

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" 
    }, 
    .... 

散點圖代碼：

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"); 
} 

的數據是TSV文件，並具有以下結構：

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

一個快速的辦法是增加國家代碼爲class或id屬性爲circle。

像這樣的事情

// 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); 
} 

現在，所有你需要的是一些造型將應用看你想要的高亮顯示的點

.dot.active { 
    fill: #bada55; 
} 

您也可以在樣式應用到g標籤，並與活動數據點做多。