Question

我有以下tsv设置，其中fips代码为ID，我想根据Sample1，Sample2和Sample1与Sample2之间的共享对颜色进行着色：

    id      Sample1     Sample2
    1031    1           0
    1032    1           0
    1033    1           1

到目前为止，我可以根据Sample1或Sample2填充县，但不能一起填写。这是我的代码：

var rateById = d3.map();
var quantize = d3.scale.quantize()
    .domain([1, 1000]) 
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
var projection = d3.geo.albersUsa()
    .scale(3960) 
    .translate([width / 2, height / 2]);
var path = d3.geo.path()
    .projection(projection);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")
    .defer(d3.tsv, "Example.tsv", function(d) { rateById.set(d.id, +d.Sample1); })
    .await(ready);
function ready(error, us) {
  if (error) throw error;
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("class", function(d) { return quantize(rateById.get(d.id)); })
    .attr("d", path);
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
}
d3.select(self.frameElement).style("height", height + "px");

我该如何做到这一点？

Answer 1

以下是我最终解决这个问题的方法：

.defer(d3.tsv, "Example.tsv", function(d) {
    if (d.Sample1 > 0 && d.Sample2 > 0) d.color = "saddlebrown"; 
    else if (d.Sample1 > 0) d.color = "green"; 
    else if (d.Sample2 > 0) d.color = "mediumpurple";
    else d.color = "lightgrey";
    rateById.set(d.id, d.color);
})

它比较Sample1和Sample2是否存在以及颜色是否基于它们的值。 It produces this map like I want.

D3.js按布尔值着色

1 个答案: