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。

减少D3 Scatterplot Matrix中的绘图数量

1 个答案: