TL; DR: как перенести d3.select('#a_brush')
?
У меня есть кисти в группах <g>
, которые называются axes
. Каждая ось <g>
содержит ось d3 и кисть d3. В выборе обновления на axes
я хочу обновить ось d3 и кисть.
axes.each(function (d) { d3.select(this).select('.axis').call(d3.axisBottom(d[1])) });
axes.each(function (d) { d3.select(this).select('.brush').call(brush.move, f(d)) });
Выше axes
- это выбор для обновления. Предположим, что f(d)
дает соответствующий массив. Первая из двух строк работает, но вторая бросает:
Uncaught TypeError: Cannot read property 'move' of undefined
Это может быть из-за того, что я нигде не сохранил переменной под названием brush. Надеюсь на вызвать метод .move
непосредственно для выделения без необходимости сохранять переменную кисти.
Какая номенклатура подходит для перемещения кисти в выделении
axes.each(function (d) { d3.select(this).select('.brush') ?? ... somehow move the brush to f(d) ...
.call(brush.move
с сохраненной переменной brush
.d3.select(this).call(d3.event.target.move,
, но я не могу перемещать кисть из любого недавнего события d3.Вам определенно следует определить переменную (или константу) для вашей кисти, например:
const brush = d3.brush();
Таким образом, вам не нужно каждый раз настраивать экстент и другие параметры. Однако, если по какой-либо причине вы действительно не хотите этого делать, просто замените brush
на d3.brush()
:
d3.select(this).select('.brush').call(d3.brush().move, f(d))
Вот базовая демонстрация, нажмите кнопку, чтобы переместить кисть:
const svg = d3.select("svg");
const g = svg.append("g");
g.call(d3.brush());
d3.select("button").on("click", function() {
g.call(d3.brush().move, [
[100, 0],
[400, 100]
])
})
svg {
background-color: wheat;
}
<script src = "https://d3js.org/d3.v5.min.js"></script>
<button>Click</button>
<br>
<svg width = "500" height = "100"></svg>
Да, ты должен.
Причина, по которой я не сохраняю кисть в переменной, заключается в том, что у меня много кистей, определенных в выборе ввода:
.each(function (d) { d3.select(this).call(d3.brushX().extent(...).on("start", brushstart).on("brush", brush).on("end", brushend) ) })
. Должен ли я делать массив или объект кистей, чтобы удерживать их?