Update app
This commit is contained in:
44
app.qmd
44
app.qmd
@@ -78,13 +78,13 @@ chart = {
|
|||||||
.attr("style", "max-width: 100%; height: auto;");
|
.attr("style", "max-width: 100%; height: auto;");
|
||||||
|
|
||||||
// Add chart title
|
// Add chart title
|
||||||
svg.append("text")
|
// svg.append("text")
|
||||||
.attr("class", "chart-title")
|
// .attr("class", "chart-title")
|
||||||
.attr("x", width / 2)
|
// .attr("x", width / 2)
|
||||||
.attr("y", 20)
|
// .attr("y", 20)
|
||||||
.attr("text-anchor", "middle")
|
// .attr("text-anchor", "middle")
|
||||||
.attr("font-size", "16px")
|
// .attr("font-size", "16px")
|
||||||
.attr("font-weight", "bold");
|
// .attr("font-weight", "bold");
|
||||||
|
|
||||||
// Create the chart group
|
// Create the chart group
|
||||||
const g = svg.append("g")
|
const g = svg.append("g")
|
||||||
@@ -101,18 +101,18 @@ chart = {
|
|||||||
.call(d3.axisLeft(y).ticks(5));
|
.call(d3.axisLeft(y).ticks(5));
|
||||||
|
|
||||||
// Add axis labels
|
// Add axis labels
|
||||||
g.append("text")
|
// g.append("text")
|
||||||
.attr("x", innerWidth / 2)
|
// .attr("x", innerWidth / 2)
|
||||||
.attr("y", innerHeight + 35)
|
// .attr("y", innerHeight + 35)
|
||||||
.attr("text-anchor", "middle")
|
// .attr("text-anchor", "middle")
|
||||||
.text("x");
|
// .text("x");
|
||||||
|
|
||||||
g.append("text")
|
// g.append("text")
|
||||||
.attr("transform", "rotate(-90)")
|
// .attr("transform", "rotate(-90)")
|
||||||
.attr("x", -innerHeight / 2)
|
// .attr("x", -innerHeight / 2)
|
||||||
.attr("y", -30)
|
// .attr("y", -30)
|
||||||
.attr("text-anchor", "middle")
|
// .attr("text-anchor", "middle")
|
||||||
.text("y");
|
// .text("y");
|
||||||
|
|
||||||
// Add a horizontal line at y = 0
|
// Add a horizontal line at y = 0
|
||||||
g.append("line")
|
g.append("line")
|
||||||
@@ -165,8 +165,8 @@ chart = {
|
|||||||
const dataByFunction = Array.from(d3.group(data, d => d.b));
|
const dataByFunction = Array.from(d3.group(data, d => d.b));
|
||||||
|
|
||||||
// Update the chart title
|
// Update the chart title
|
||||||
svg.select(".chart-title")
|
// svg.select(".chart-title")
|
||||||
.text(`B-spline Basis Functions (${selectedKnots} knots, μ = ${selectedMu})`);
|
// .text(`B-spline Basis Functions (${selectedKnots} knots, μ = ${selectedMu})`);
|
||||||
|
|
||||||
// Create a key function to track basis functions
|
// Create a key function to track basis functions
|
||||||
const keyFn = d => d[0];
|
const keyFn = d => d[0];
|
||||||
@@ -182,9 +182,9 @@ chart = {
|
|||||||
.attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0}))))
|
.attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0}))))
|
||||||
.style("opacity", 0),
|
.style("opacity", 0),
|
||||||
update => update,
|
update => update,
|
||||||
exit => exit.transition().duration(750).style("opacity", 0).remove()
|
exit => exit.transition().duration(1000).style("opacity", 0).remove()
|
||||||
)
|
)
|
||||||
.transition().duration(750)
|
.transition().duration(1000)
|
||||||
.attr("d", d => line(d[1]))
|
.attr("d", d => line(d[1]))
|
||||||
.attr("stroke", (_, i) => color(i))
|
.attr("stroke", (_, i) => color(i))
|
||||||
.style("opacity", 1);
|
.style("opacity", 1);
|
||||||
|
|||||||
Reference in New Issue
Block a user