Question

让我先说一下我是D3.js的新手和一般的编码。我是一名信息图表艺术家，我一直在使用QGIS生成地图，但我正在尝试使用D3.js生成一个关于阿片类药物死亡故事的等值线图。基本上我正在尝试重新创建这张地图。 map from the Economist

我试图从Mike Bostock使用这个map开始并改变一些参数，但是我对颜色范围和比例感到困惑。测量值为每100,000人口1个。我的域名从1.543385761开始，到131.0814217结尾。

我正在努力解决的问题是规模输入和输出：

var x = d3.scaleLinear()
    .domain([0, 132])
    .rangeRound([600, 860]);

var color = d3.scaleThreshold()
    .domain(d3.range(2, 10))
    .range(d3.schemeBlues[9]);

var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0, 40)");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

我可以看到我需要一些代码来定义25和以上的所有颜色作为最暗的颜色。甚至不确定我希望这是我的最后一个传奇，但我很想知道如何重现它。我很震惊，我能够做到这一点，但现在感觉有点迷失。先感谢您！

Answer 1

让我们来检查你的比例：

var color = d3.scaleThreshold()
    .domain(d3.range(2, 10))
    .range(d3.schemeBlues[9]);

您的域名是这样创建的数组：

d3.range(2,10) // [2,3,4,5,6,7,8,9]

这些是您的阈值，颜色将根据小于或等于2的值，多于两个，最多三个，多于三个，最多四个....以及超过9来映射。此域已映射到范围中定义的九个值：

d3.schemeBlues[9] // ["#f7fbff",  "#deebf7",  "#c6dbef",  "#9ecae1",  #6baed6",  #4292c6",  "#2171b5",  "#08519c",  "#08306b"]

要设置这些颜色的阈值，使超过25的值为一种颜色，请使用具有相应阈值的数组定义域：

.domain([2,3,4,5,6,7,8,25]);

在下面的代码段中，将应用此域。矩形的颜色取决于它们的位置，所有矩形在第25个之后（从左到右然后逐行计数），一个将是一种颜色。

＆＃13;

var color = d3.scaleThreshold()
    .domain([2,3,4,5,6,7,8,25])
    .range(d3.schemeBlues[9]);
    
var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",500);
  
var rects = svg.selectAll("rect")
  .data(d3.range(100))
  .enter()
  .append("rect")
  .attr("width",15)
  .attr("height", 15)
  .attr("y", function(d,i) { return Math.floor(i / 10) * 20 + 10 })
  .attr("x", function(d,i) { return i % 10 * 20 })
  .attr("fill", function(d) { return color(d); })

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

＆＃13;

等值线图比例尺和图例

1 个答案: