javascript - 减少 D3 散点图矩阵中的绘图数量

Question

我想将 D3 散点图矩阵中的绘图数量减少到 4 个。我正在使用 https://bl.ocks.org/mbostock/4063663作为我最初的模板。我的数据设置在 http://plnkr.co/edit/lySDnd58vUlelRKmk20S?p=preview 。理想情况下，我只想要顶部的图，仅设置一个 Y 轴标签(每 1000 起凶杀案)，而 x 轴更改为每个后续图。类似于油漆中的快速模型。 https://postimg.org/image/7638jvln3/

我确信它会被控制在这里的某个地方，但我意识到我有点迷失了。如果有人能够帮助我进行设置，我将不胜感激!

 svg.selectAll(".x.axis")
  .data(traits)
  .enter().append("g")
  .attr("class", "x axis")
  .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
  .each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });

svg.selectAll(".y.axis")
  .data(traits)
  .enter().append("g")
  .attr("class", "y axis")
  .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
  .each(function(d) { y.domain(domainByTrait[d]);d3.select(this).call(yAxis); });


var cell = svg.selectAll(".cell")
  .data(cross(traits, traits))
  .enter().append("g")
  .attr("class", "cell")
  .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
  .each(plot);

最后一个问题，是否可以显示 y 轴标题。当我添加下面的代码时，所有内容都重新缩放并且数据消失了。

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

确实可以使用相同的代码。有点奇怪，但可能:

  // 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")
  ...

更新plunker .