Javascript 带鼠标事件的贝塞尔曲线

我想用鼠标事件画一条贝塞尔曲线

function draw(selection)
{
    var keep = false, path, xy0;
    line = d3.svg.line()
        .interpolate(function(points) {return points.join("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); })
        .x(function(d) {return d[0];})
        .y(function(d) {return d[1];});

    selection
        .on('mousedown', function() {
            keep = true;
            xy0 = d3.mouse(this);
            path = d3.select('svg')
                .append('path')
                .attr('d', line([xy0, xy0]))
                .style({'stroke': 'black', 'stroke-width': '3px'});
        })
        .on('mouseup', function() {
            keep = false;
        })
        .on('mousemove', function(){
            if(keep) {
                Line = line([xy0, d3.mouse(this).map(function(x) {return x - 1;})]);
                console.log(Line);
                path.attr('points', Line);
            }
        });
}

但它不起作用。你知道怎么做吗

---

提前谢谢，

我仍然不确定我是否理解这个问题

M10 80 C 40 10、65 10、95 80 S 150 150、180 80是贝塞尔曲线参数

不，这是路径的“d”属性，它绘制了一条特定的贝塞尔曲线。我不知道你会怎么把它和你的鼠标动作结合起来。我试过，我猜它会产生某种曲线：

var keep=false，
mouseStart=null，
controlPoints=“C 40 10、65 10、95 80 S 150”；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，500）
.attr（'height'，500）
.style（'border'，'1px纯黑'）；
var path=svg.append（“路径”）
.风格（“笔划”、“钢蓝”）
.style（“笔划宽度”、“2px”）
.样式（“填充”、“无”）；
on（'mousedown'，function（）{
保持真实；
mouseStart=d3.mouse（this）；
})
.on（'mouseup'，function（）{
保持=假；
})
.on（'mousemove'，function（）{
var mouseEnd=d3.mouse（this）；
如果（保留）{
attr（“d”、“M”+mouseStart+controlPoints+mouseEnd）；
}
});

你到底想做什么？这条线

指向.连接（“M10 80 C 40 10，65 10，95 80 S 150 150，180 80”）没有什么意义。在单击按钮的鼠标移动中，是否要在鼠标向下位置和当前位置之间绘制曲线？我要在鼠标向下位置和当前位置之间绘制贝塞尔曲线。M10 80 C 40 10、65 10、95 80 S 150 150、180 80是贝塞尔曲线参数。如何在代码中实现这一点？谢谢，“但它不起作用”不是一个问题陈述，它充其量只是一个观点（代码完全按照您编写它的目的来做；它完全按照源代码的意图来工作）：您期望这段代码做什么，它在做什么，您认为这一差异来自哪里，到目前为止您尝试了什么来修复它？