Инфографическое условное заполнение пользовательских форм SVG

Question

Я хочу создать вид инфографики, где я могу интуитивно представлять проценты, используя своего рода логику заполнения.

Пример

Для простоты предположим, что интервалы составляют 25%.Для задачи 75% домохозяйств будет четыре дома, и 3 из них будут заполнены. Оставшийся дом останется fill:'none'.

Я имел в виду что-то вроде:

Это было бы в форме SVG.

Единственный способЯ могу придумать, чтобы добиться этого, предварительно нарисовав дома как собирательный образ и связав файл, например:

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

Но это не кажется очень модульным и не использует d3 вряд ли.

Вопрос: Возможно ли / возможно ли создать простое условное заполнение с интервалом 25% с использованием d3-совместимой логики?Чего бы ожидал мой .data() звонок?Это должен быть массив, может быть, двоичный:

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

Может быть, есть лучший способ, но это лучшее, что у меня есть.

Answer 1

"Я хочу создать вид инфографики, в котором я могу интуитивно представлять проценты, используя своего рода логику заполнения" ... Техническое название для этого - пиктограмма .

Для создания пиктограммы вам не нужно ничего особенного, вы можете использовать общий выбор ввода.Итак, учитывая ваши данные ...

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

... мы создадим один дом для каждого элемента массива ...

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

... и заполните их в соответствии сэлемент данных:

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

Вот базовая демонстрация:

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"
  })

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