So machen Sie Streulichtdaten markieren on-click

Question

Sehr geehrte Mitprogrammierer,

Ich versuche, 2 interaktive Visualisierungen zu machen. Die erste ist eine Weltkarte, auf die der Benutzer klicken kann. Mit jedem Klick möchte ich die zweite Visualisierung, das Streudiagramm, um den spezifischen Kreis/Punkt hervorzuheben, der die Daten des Landes anzeigt, auf das geklickt wurde. Kannst du mir bitte Helfen? Bisher habe ich sichergestellt, dass beim Klicken auf ein Land der Ländercode zurückgegeben wird.

Der Code der Weltkarte:

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

Der Scatterplot Code:

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

Die Daten sind eine tsv-Datei und hat die folgende Struktur:

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 

Jede mögliche Hilfe sehr geschätzt werden!

Dank

Answer 1

Eine schnelle Möglichkeit wäre, Ländercode als class oder id Attribut auf den circle hinzuzufügen.

So etwas wie diese

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

Jetzt können Sie den Ländercode verwendet, um Sie eine andere Klasse nur gesetzt zurückgegeben oder direkt Farbe Stil.

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

Alles was Sie jetzt brauchen, ist eine Styling, das das gewünschte Aussehen für die markierten Punkte wollen gelten

.dot.active { 
    fill: #bada55; 
} 

Sie auch den Stil der g Tag anwenden könnte und mit dem aktiven Datenpunkt tun .