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

Question

亲爱的程序员们，

我正在尝试制作 2 个交互式可视化。第一个是用户可以点击的世界地图。每次点击我都想要第二个可视化，散点图，突出显示特定的 circle/dot，它显示了被点击的国家的数据。请你帮助我好吗？到目前为止，我确保当点击一个国家时，会返回国家代码。

世界地图代码：

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 来设置另一个 class 或直接添加颜色样式。

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

现在您所需要的只是一些样式，可以为突出显示的点应用您想要的外观

.dot.active {
  fill: #bada55;
}

您还可以将样式应用到 g 标签，并对活动数据点做更多的事情。

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

How to make scatterplot highlight data on-click

javascript

csv

onclick

scatter-plot

world-map