Reduzieren Sie die Anzahl der Plots in D3 Scatterplot Matrix

Question

Ich möchte die Anzahl der Plots in einer D3 Streudiagramm-Matrix auf nur 4 reduzieren. Ich verwende https://bl.ocks.org/mbostock/4063663 als meine ursprüngliche Vorlage. Ich habe meine Daten in http://plnkr.co/edit/lySDnd58vUlelRKmk20S?p=preview eingerichtet. Idealerweise möchte ich nur die Plots auf der Oberseite, die nur eine Y-Achsenbeschriftung (Tötungsdelikte pro 1000) einrichten, wobei sich die x-Achse zu jeder nachfolgenden Plot ändert. Etwas Ähnliches wie dieses schnelle Modell in Farbe. https://postimg.org/image/7638jvln3/

Ich war sicher, dass es hier irgendwo kontrolliert worden wäre, aber ich erkannte, dass ich ein bisschen verloren war. Wenn jemand mir helfen kann, das einzurichten, wird es sehr appreciated!

Eine letzte Frage, ist es möglich, einen y-Achsentitel zu erhalten. Wenn ich den folgenden Code hinzufüge, wurde alles neu skaliert und die Daten verschwanden.

svg.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 0 - margin.left) 
    .attr("x",0 - (height/2)) 
    .attr("dy", "1em") 
    .style("text-anchor", "middle") 
    .style("font-size", "12px") 
    .text("Homicides per 1,000"); 

Answer 1

Es ist tatsächlich möglich, den gleichen Code zu verwenden. Ein wenig seltsam, aber möglich:

// keep similar calucations 
    var domainByTrait = {}, 
    traits = d3.keys(data[0]).filter(function(d) { return d !== "name"; }), 
    n = traits.length - 1; 

    traits.forEach(function(trait) { 
    domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; }); 
    }); 

    // reset traits to ones you care about 
    var traits = ["% Holding Only HS Diploma", "Unemployement Rate", "Median Household Value ($10k)", "% African American"]; 

    // chane xAxis ticks to 1, not n 
    xAxis.tickSize(size * 1); 
    yAxis.tickSize(-size * n); 

... 

// modify y axis to only Homicides 
svg.selectAll(".y.axis") 
    .data(["Homicides per 1000 people"]) 
    .enter().append("g") 
    ... 

// modify cross-product 
var cell = svg.selectAll(".cell") 
    .data(cross(traits, ["Homicides per 1000 people"])) 
    .enter().append("g") 
    ... 

// remove filter on text titltes 
cell 
    //.filter(function(d) { return d.i === d.j; }) 
    .append("text") 
    ... 

Aktualisieren plunker.