Я пытаюсь обновить данные из нескольких массивов.Мои начальные требования таковы:
var svgWidth = 800;
var svgHeight = 300;
var svg = d3.select("body")
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.style("background", "red");
var zoom = d3.zoom()
.on("zoom", update);
var array = [1, 2, 3]
svg.append("rect")
.attr("class", "zoom")
.attr("width", svgWidth)
.attr("height", svgWidth)
.call(zoom)
var circles = svg.append("g").selectAll("g")
.data(array)
.enter()
.append('g')
circles.selectAll("circle")
.data(function (d) { return [[1, d], [2, d], [3, d]]; })
.enter()
.append("circle")
.attr("class", "node1")
.attr("fill", "black")
.attr("cx", (d) => { return ((d[0] * 50)); })
.attr("cy", (d) => { return d[1] * 50 })
.attr("r", "8")
circles.exit().remove();
Результат - 3x3 кружки .Сейчас я пытаюсь изменить данные.Для простоты я использую функцию масштабирования для создания новых данных:
function update() {
const shift = d3.event.transform.y
var update = svg.select("g").selectAll("g")
.data(array)
update.exit().remove();
var updateGroup = update.enter().append("g");
update = updateGroup.merge(update)
updateGroup.enter().selectAll("circle")
.data(function (d) { return [[1, d], [2, d]]; })
.enter()
.append("circle")
update.select("circle")
.attr("fill", "white")
.attr("cx", (d) => { return ((d[0] * 50)); })
.attr("cy", (d) => { return(d[1] * 50) + shift})
.attr("r", "8")
};
Здесь я пытаюсь просто сдвинуть все 9 точек данных вверх или вниз с помощью значения y из функции масштабирования / обновления.К сожалению, это не работает.Если кто-то знает, как обновить эти 9 точек данных, я был бы очень благодарен.Вот вам FIDDLE