Существует привязка к каждому тику на оси: это элементы в области шкалы, переданной на ось.
В вашей конкретной ситуации, лучшая идея может быть использована filter
с нулевым индексом (или find
, если браузер поддерживает его), чтобы получить объект в массиве данных на основе данных галочки (опять же, соответствующих области шкалы).
Однако, отвечаяЗаголовок вашего вопроса ( "Как связать данные с осью" ), вы можете сделать это, непосредственно манипулируя первым аргументом (например, внутри tickFormat
или даже функцией each
).Тем не менее, это будет мешать текущим данным.
Более безопасный подход - использование локальной переменной , например ...
var local = d3.local();
..., которую вы можетеиспользуйте для получения объекта в массиве данных по индексу.После этого локальная переменная будет привязана к элементу DOM.
Посмотрите на эту демонстрацию, ось сделана с использованием шкалы, которая имеет num
для домена, но она изменится через 1 секунду.для свойства name
, используя привязанную к ним локальную переменную:
var data = [{
num: 1,
name: "foo"
},
{
num: 2,
name: "bar"
},
{
num: 3,
name: "baz"
}
];
var svg = d3.select("svg");
var local = d3.local();
var scale = d3.scalePoint()
.range([50, 250])
.domain(data.map(function(d) {
return d.num
}))
var axis = d3.axisBottom(scale)
.tickFormat(function(d, i) {
local.set(this, data[i].name);
return d;
})
var gX = svg.append("g")
.attr("transform", "translate(0,100)")
.call(axis);
d3.timeout(function() {
axis.tickFormat(function() {
return local.get(this)
});
gX.call(axis)
}, 1000)
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>