技术问询：在JSXGraph中绘制与可移动预算线相切的无差异曲线

Absolutely doable! JSXGraph is built for dynamic, interactive geometric elements, so you can absolutely create a movable budget line that stays tangent to a semicircular indifference curve—with real-time updates as you drag the line. Here's a complete, working example that matches the style of the economics chart you referenced:

Full Working Code #

<!DOCTYPE html>
<html>
<head>
    <title>Budget Line & Indifference Curve</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.9.2/jsxgraph.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.9.2/jsxgraphcore.js"></script>
</head>
<body>
    <div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>

    <script type="text/javascript">
        // Initialize the JSXGraph board
        const board = JXG.JSXGraph.initBoard('jxgbox', {
            axis: true,
            grid: true,
            showNavigation: false,
            zoom: { wheel: false },
            pan: { enabled: false }
        });

        // Draggable control points for the budget line
        const budgetYIntercept = board.create('point', [0, 5], { 
            name: '', 
            style: { fillColor: 'blue', size: 6 } 
        });
        const budgetXIntercept = board.create('point', [5, 0], { 
            name: '', 
            style: { fillColor: 'blue', size: 6 } 
        });

        // Create the budget line using the two intercept points
        const budgetLine = board.create('line', [budgetYIntercept, budgetXIntercept], {
            strokeColor: 'blue',
            strokeWidth: 2,
            name: 'Budget Line'
        });

        // Calculate the radius of the tangent semicircle (centered at origin, y ≥ 0)
        const getTangentRadius = () => {
            // Convert budget line to general form: Ax + By + C = 0
            const A = budgetXIntercept.Y() - budgetYIntercept.Y();
            const B = budgetYIntercept.X() - budgetXIntercept.X();
            const C = budgetXIntercept.X() * budgetYIntercept.Y() - budgetYIntercept.X() * budgetXIntercept.Y();
            
            // Radius equals distance from origin to the budget line (tangent condition)
            return Math.abs(C) / Math.sqrt(A**2 + B**2);
        };

        // Create the indifference curve (upper semicircle)
        const indifferenceCurve = board.create('circle', [
            [0, 0],
            () => getTangentRadius()
        ], {
            strokeColor: 'red',
            strokeWidth: 2,
            strokeDash: 2,
            name: 'Indifference Curve',
            // Only render the upper half of the circle
            sector: [[0, Math.PI]]
        });

        // Mark the tangent (equilibrium) point
        const tangentPoint = board.create('intersection', [budgetLine, indifferenceCurve, 0], {
            style: { fillColor: 'green', size: 8 },
            name: 'Equilibrium'
        });

        // Add instructional text
        board.create('text', [1, 5.5, 'Drag blue points to adjust the budget line'], { fontSize: 12 });
    </script>
</body>
</html>

Key Features Explained #

• Interactive Budget Line: Drag the blue intercept points to move or resize the budget line—JSXGraph automatically triggers updates for all dependent elements.
• Tangency Logic: The semicircle's radius is recalculated in real time using the geometric rule that the distance from the circle's center to the tangent line equals the radius. This ensures the curve always stays tangent to the budget line.
• Chart Style: The red dashed semicircle matches typical indifference curve styling, while the solid blue budget line and green equilibrium point align with standard economics chart conventions.
• Customization Options: If you need the indifference curve centered at a different point (not the origin), just modify the circle's center coordinates in the circle constructor and adjust the distance formula in getTangentRadius() accordingly.

内容的提问来源于stack exchange，提问作者Peter