在带有控制点的可拖动点之间绘制曲线以调整曲线 SVG 和 d3.js

Question

我想根据我从数据库中检索到的 JSON 数据显示几条曲线，它们是 x,y 坐标，每条线都是一个单独的数组，其中包含多个对象的坐标，以形成完整的路径。

所有点必须是可拖动的，并且每2个点之间必须有一个控制点来调整每条线的曲线。

到目前为止，在互联网的帮助下，我有一组可拖动的点，但曲线的控制点只是其中一个坐标，不是动态创建的，也许控制点的位置必须计算出来在输出之前馈入数组，但我不确定这是否是这样做的方法。 （希望这是有道理的）

见JSFiddle

var point_positions = [];
var json_data_muliple_lines = [[{"id": "82","x": "100","y": "50"}, {"id": "83","x": "25","y": "110"}, {"id": "97","x": "90","y": "150"}, {"id": "98","x": "150","y": "224"}, {"id": "99","x": "250","y": "150"}, {"id": "100","x": "300","y": "200"}, {"id": "100","x": "320","y": "230"}],[{"id": "1","x": "120","y": "60"}, {"id": "2","x": "30","y": "150"}, {"id": "3","x": "120","y": "170"}, {"id": "4","x": "180","y": "260"}, {"id": "5","x": "300","y": "250"}]];
var json_data = [{"line_pi_id": "82","x": "100","y": "50"}, {"line_pi_id": "83","x": "25","y": "110"}, {"line_pi_id": "97","x": "90","y": "150"}, {"line_pi_id": "98","x": "150","y": "224"}, {"line_pi_id": "99","x": "250","y": "150"}, {"line_pi_id": "100","x": "300","y": "200"}, {"line_pi_id": "100","x": "320","y": "230"}];

$.each(json_data, function(i, item) {
    line_response = json_data[i];
    var line_pi_id = line_response.line_pi_id;
    var li_x = parseInt(line_response.x);
    var li_y = parseInt(line_response.y);

    point_positions.push({
        x: li_x,
        y: li_y
    })
})
var svg = d3.select('#curves').append('svg')
    .attr({
        width: 1000,
        height: 1000
    });
var handleRadius = 8;

function curves_init(point_positions) {
    var curves = [{
        type: 'Q',
        points: point_positions
    }];
    console.log("curves", curves);
    var controlLineLayer = svg.append('g').attr('class', 'control-line-layer');
    var mainLayer = svg.append('g').attr('class', 'main-layer');
    var handleTextLayer = svg.append('g').attr('class', 'handle-text-layer');
    var handleLayer = svg.append('g').attr('class', 'handle-layer');

    var drag = d3.behavior.drag()
        .origin(function(d) {
            return d;
        })
        .on('drag', dragmove);

    function dragmove(d) {
        d.x = d3.event.x;
        d.y = d3.event.y;
        d3.select(this).attr({
            cx: d.x,
            cy: d.y
        });
        d.pathElem.attr('d', pathData);
        if (d.controlLineElem) {
            d.controlLineElem.attr('d', controlLinePath);
        }
        handleTextLayer.selectAll('text.handle-text.path' + d.pathID + '.p' + (d.handleID + 1))
            .attr({
                x: d.x,
                y: d.y
            }).text(handleText(d, d.handleID));
    }
    show_curves(controlLineLayer, mainLayer, handleTextLayer, handleLayer, curves, drag);
}

function pathData(d) {
    var p = d.points;
    curve = [
        'M', p[0].x, ' ', p[0].y,
        'Q', p[1].x, ' ', p[1].y,
        ' ', p[2].x, ' ', p[2].y,
        ' ', p[3].x, ' ', p[3].y,
        ' ', p[4].x, ' ', p[4].y,
        ' ', p[5].x, ' ', p[5].y,
        ' ', p[6].x, ' ', p[6].y
    ].join('');

    console.log("curve", curve);
    return curve;
}

function controlLinePath(d) {
    var values = [];
    d.points.forEach(function(p) {
        values.push(p.x);
        values.push(p.y);
    });
    return 'M' + values.join(' ');
}

function handleText(d, i) {
    return 'p' + (i + 1) + ': ' + d.x + '/' + d.y;
}

function show_curves(controlLineLayer, mainLayer, handleTextLayer, handleLayer, curves, drag) {
    mainLayer.selectAll('path.curves').data(curves)
        .enter().append('path')
        .attr({
            'class': function(d, i) {
                return 'curves path' + i;
            },
            d: pathData
        })
        .each(function(d, i) {
            var pathElem = d3.select(this),
                controlLineElem,
                handleTextElem;
            if (d.type !== 'L') {
                controlLineElem = controlLineLayer.selectAll('path.control-line.path' + i)
                    .data([d]).enter().append('path')
                    .attr({
                        'class': 'control-line path' + i,
                        d: controlLinePath(d)
                    });
            }
            handleTextElem = handleTextLayer.selectAll('text.handle-text.path' + i)
                .data(d.points).enter().append('text')
                .attr({
                    'class': function(handleD, handleI) {
                        return 'handle-text path' + i + ' p' + (handleI + 1);
                    },
                    x: function(d) {
                        return d.x
                    },
                    y: function(d) {
                        return d.y
                    },
                    dx: 10,
                    dy: 0
                })
                .text(handleText);
            handleLayer.selectAll('circle.handle.path' + i)
                .data(d.points).enter().append('circle')
                .attr({
                    'class': 'handle path' + i,
                    cx: function(d) {
                        return d.x
                    },
                    cy: function(d) {
                        return d.y
                    },
                    r: handleRadius
                })
                .each(function(d, handleI) {
                    d.pathID = i;
                    d.handleID = handleI;
                    d.pathElem = pathElem;
                    d.controlLineElem = controlLineElem;
                })
                .call(drag);
        });
}
curves_init(point_positions);

所以我需要您的帮助来弄清楚如何在每 2 个坐标之间创建一个控制点，以及我是否需要更改 JSON 输出以绘制控制点坐标以及如何将此代码调整为多条路径，因为它仅在以下情况下才有效手动设置 pathData() 函数以匹配 JSON 输出。

感谢任何帮助！ 谢谢

Answer 1

要将直线转换为等效的贝塞尔曲线，只需在起点和终点之间的 1/3 和 2/3 位置插入控制点即可。

<svg width="500" height="500">
  
  <path d="M 100 100
           C 200 200 300 300 400 400"
        fill="none" stroke="blue" stroke-width="10"/>
  
</svg>