Условная настройка цвета заливки одной полосы на горизонтальной гистограмме в D3.js v5
Я работаю над веб-анкетой (список в основном с множественным выбором, но также и с другими типами элементов). После отправки анкеты я хочу показать страницу, сравнивающую выбор респондента, который только что заполнил анкету. с выбором, сделанным всеми респондентами до этого момента (всего).
Я хочу показать элементы множественного выбора в горизонтальных гистограммах (столбцы идут слева направо).
Я посмотрел на: https://bl.ocks.org/mbostock/7322386
Конечно, слева от каждой альтернативы будет описание (множественный выбор).
Прежде всего, столбчатая диаграмма должна отражать общее количество вариантов, сделанных для каждой альтернативы в вопросе с несколькими вариантами ответов до этого момента. Пункт 1 был выбран 3 раза, пункт 2 был выбран 33 раза и т. д. Альтернатива, выбранная респондентом, который только что заполнил вопросник, должна быть выделена отдельным цветом (цветом заполнения?). Это позволит ему/ей сравнить свой выбор со всеми, кто заполнил анкету до этого момента.
Я предполагаю, что это будет условная настройка цвета заливки одного столбца в гистограмме (постоянная, а не при наведении мыши или что-то в этом роде).
Может ли кто-нибудь указать мне на горизонтальную гистограмму, которая уже имеет условную настройку цвета заливки? Не будет ли кто-нибудь так любезен, чтобы включить его в гистограмму Бостока? (https://bl.ocks.org/mbostock/7322386)
Это кажется полезным дополнением к гистограмме, которое было бы полезно для многих...
Помощь / предложения будут оценены.
Я вижу потенциал в D3.js, но кривая обучения может быть действительно крутой...
С Уважением
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я вас правильно понял, вы должны структурировать свои данные, чтобы не только передавать числа, но и флаг, если он должен быть выделен. После того, как он у вас есть, вы можете либо условно назначить класс, либо напрямую установить фон или атрибут заливки.
<!DOCTYPE html>
<meta charset = "utf-8">
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
.chart div.highlighted {
background-color: darkblue;
}
</style>
<div class = "chart"></div>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [{
value: 4,
highlighted: false
},{
value: 6,
highlighted: false
},{
value: 5,
highlighted: true
},{
value: 9,
highlighted: false
}];
var x = d3.scaleLinear()
.domain([0, d3.max(data.map(function(d) {return d.value;}))])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d.value) + "px"; })
.classed('highlighted', function(d) { return d.highlighted; })
.text(function(d) { return d.value; });
</script>
Привет, Кодерино, это именно то, что я искал, большое спасибо за быстрый ответ! :) Источником этой гистограммы будет файл JSON (все респонденты) и вопросник Gravityforms (респондент, который будет сравниваться с респондентами в файле JSON, прежде чем он будет добавлен в этот файл). Еще раз большое спасибо.