D3: обновление данных & ldquo; введите & rdquo; выбор пуст
Если вы используете, как показано ниже, он должен работать
@Column(name="[order]")
private int order;
1 ответ
Вы вводите новый прямоугольник, вы можете войти .size() на выбор ввода и увидеть, что добавлен один элемент:
const data = [
{
weekId: "w-1",
start: 100
},
{
weekId: "w-2",
start: 200
}
];
const updatedData = [
{
weekId: "w-1",
start: 100
},
{
weekId: "w-2",
start: 200
},
{
weekId: "w-3",
start: 300
}
];
// Create initial data
d3.select("svg")
.selectAll()
.data(data, d => d.weekId)
.enter()
.append("rect")
.attr("class", "spline-group")
.attr("x", w => w.start)
.attr("y", 20)
.attr("width", 22)
.attr("height", 22)
.attr("fill", "green");
// https://bl.ocks.org/mbostock/3808218
// DATA JOIN
// Join new data with old elements, if any.
const dataGroups = d3
.selectAll("rect.spline-group")
.data(updatedData, d => d.weekId);
// UPDATE
// Update old elements as needed.
dataGroups.attr("fill", "blue");
// ENTER
// Create new elements as needed.
const newItems = dataGroups
.enter()
.append("rect")
.attr("class", "spline-group")
.attr("x", w => w.start)
.attr("y", 30)
.attr("width", 20)
.attr("height", 20)
.attr("fill", "white");
console.log("new items: " + newItems.size());<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
</svg>Итак, если вы вводите новый элемент, куда вы добавляете его? Давайте посмотрим, где находится ваш прямоугольник:
Вы не указали, где вы хотели прямоугольник. При вводе первых прямоугольников вы используете:
d3.select("svg").selectAll("rect")
И ваши введенные элементы создаются как дочерние элементы svg, во втором цикле ввода вы просто используете d3.selectAll("rect"). Вы не указали, где хотите ввести дополнительный элемент, поэтому он был добавлен в документ.
Чтобы убедиться, что вы вводите новые элементы в нужном месте, просто сначала выберите родительский контейнер, как вы это делали при вводе первых двух элементов:
const dataGroups = d3.select("svg") // select SVG
.selectAll("rect.spline-group") // then select all rects.
.data(updatedData, d => d.weekId);
dataGroups.attr("fill", "blue");
const newItems = dataGroups
.enter()
.append("rect")
const data = [
{
weekId: "w-1",
start: 100
},
{
weekId: "w-2",
start: 200
}
];
const updatedData = [
{
weekId: "w-1",
start: 100
},
{
weekId: "w-2",
start: 200
},
{
weekId: "w-3",
start: 300
}
];
// Create initial data
d3.select("svg")
.selectAll()
.data(data, d => d.weekId)
.enter()
.append("rect")
.attr("class", "spline-group")
.attr("x", w => w.start)
.attr("y", 20)
.attr("width", 22)
.attr("height", 22)
.attr("fill", "green");
// https://bl.ocks.org/mbostock/3808218
// DATA JOIN
// Join new data with old elements, if any.
const dataGroups = d3.select("svg")
.selectAll("rect.spline-group")
.data(updatedData, d => d.weekId);
// UPDATE
// Update old elements as needed.
dataGroups.attr("fill", "blue");
// ENTER
// Create new elements as needed.
const newItems = dataGroups
.enter()
.append("rect")
.attr("class", "spline-group")
.attr("x", w => w.start)
.attr("y", 30)
.attr("width", 20)
.attr("height", 20)
.attr("fill", "crimson");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500">
</svg>