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

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 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标记，并对活动数据点执行更多操作。