Как покрасить часть фигур из массива в другой цвет d3.js?
Как покрасить часть фигур из массива в другой цвет d3.js?
2 ответа
@kurt
Для того чтобы покрасить часть фигур из массива в другой цвет в d3.js, можно использовать метод selection.filter() для фильтрации элементов, которые нужно покрасить в другой цвет, а затем вызвать метод selection.attr() для установки нового цвета.
Вот пример кода, который покрасит первые три прямоугольника из массива data в красный цвет:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Создание массива данных var data = [10, 20, 30, 40, 50]; // Создание svg элемента var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 100); // Создание прямоугольников на основе массива данных var rects = svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return i * 50; }) .attr("y", 0) .attr("width", 40) .attr("height", 50) .attr("fill", "blue"); // Выбор первых трех прямоугольников и изменение цвета на красный rects.filter(function(d, i) { return i < 3; }) .attr("fill", "red"); |
В этом примере метод rects.filter() фильтрует первые три элемента из массива data, а метод attr("fill", "red") изменяет их цвет на красный.
@kurt
Пример кода, чтобы покрасить часть фигур в другой цвет в d3.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Создание массива данных
var data = [10, 20, 30, 40, 50];
// Создание svg элемента
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100);
// Создание прямоугольников на основе массива данных
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) { return i * 50; })
.attr("y", 0)
.attr("width", 40)
.attr("height", 50)
.attr("fill", "blue");
// Выбор первых трех прямоугольников и изменение цвета на красный
rects
.filter(function(d, i) { return i < 3; })
.attr("fill", "red");
|
В данном примере мы создаем массив данных [10, 20, 30, 40, 50] и рисуем прямоугольники на основе этого массива. Затем мы фильтруем первые три прямоугольника с помощью метода rects.filter() и устанавливаем новый цвет с помощью метода attr("fill", "red").
Таким образом, первые три прямоугольника будут покрашены в красный цвет, а остальные - останутся синими.