如何使散点图突出显示数据点击

我想让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

任何帮助非常感谢！

感谢

来源

2016-06-09 Stijn Robben

一个快速的办法是增加国家代码为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标签，并与活动数据点做多。

来源

2016-06-09 18:35:18 theCaveat

非常感谢您的反馈！但是看起来.attr（“class”，function（d）{return x（d.CountryCode）+“dot”;}）工作不正常。在控制台中，它给每个圈子一个“NaN点”类。编辑 - 没关系，问题似乎是“x”。 –

@StijnRobben如果它适合你，你可以将它标记为答案吗？ – theCaveat

我该怎么做？ –

如何使散点图突出显示数据点击

回答

相关问题