信息图表条件填充自定义SVG形状

Question

我想创建一种信息图，我可以使用一种填充逻辑直观地表示百分比。

示例

为简单起见，我们假设间隔为25％。对于75％的家庭来说，总共将有4所房屋，其中3栋将被填补。剩余的房屋将保留fill:'none'。

我有一些想法：

它将采用SVG形式。

我能想到实现这一目标的唯一方法是将房屋预先绘制为集体图像并将文件链接起来：

var fileMap = { 50:'fifty.svg', 75:'seventy-five.svg'};

但这似乎并非模块化，并且它几乎没有使用d3。

问题：使用d3兼容逻辑创建简单的25％间隔条件填充是否可行/可行？我的.data()电话会期待什么？它必须是一个数组，也许是二进制文件：

var data = [1,1,1,0] //75%;

也许有更好的方式，但这是我所拥有的最好的方式。

Answer 1

＆＃34;我想创建一种信息图，我可以使用一种填充逻辑直观地表示百分比＆＃34; ...这个技术名称是象形图

要创建象形图，您不需要任何特殊内容，您可以使用常用的输入选择。所以，鉴于你的数据......

var data = [1,1,1,0]

...我们将为每个数组元素创建一个房子......

var house = svg.selectAll(null)
  .data(data)
  .enter()
  .append("path")

...并根据基准填写它们：

.style("fill", function(d){
    return d ? "blue" : "white"
})

这是一个基本演示：

＆＃13;

＆＃13;

var d = "m787.67 1599.58l148.83 157.74 124.02-131.45v630.95h396.87 198.44 396.87v-630.95l124.02 131.45 148.83-157.74-768.94-814.97-768.94 814.97m1066.6-709.82v78.868l198.44 210.32v-289.18h-198.44z";

var svg = d3.select("svg");

var data = [1, 1, 1, 0];

var house = svg.selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", d)
  .attr("transform", function(_, i) {
    return "translate(" + (i * 70) + ",100) matrix(.04 0 0 .03-4.159-50.852)"
  })
  .style("stroke", "black")
  .style("stroke-width", "50px")
  .style("fill", function(d) {
    return d ? "blue" : "white"
  })

＆＃13;

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

＆＃13;

＆＃13;

＆＃13;