Живое рисование линии в D3.js

Я только начал работать с D3.js и хочу создать что-то вроде того, что мы делаем в Paint для рисования линии. Шаги должны быть такими же: - Нажмите на точку на экране - Перетащите в точку назначения, чтобы создать линию.

Что у меня сейчас проблемы, так это то, что когда вы перетаскиваете мышь к месту назначения, линия должна двигаться в соответствии с вашей мышью. Как я могу это сделать?

Спасибо.


svg d3.js svg-animate jquery-svg
person wayne    schedule 16.08.2013    source источник
comment
Не могли бы вы разместить пример своего кода на jsbin.com или jsfiddle, чтобы мы могли увидеть, что он сейчас делает?   -  person ne8il    schedule 16.08.2013
comment
Без кода трудно увидеть, что именно вы ищете, но этот код в значительной степени делает перетаскивание (с другими функциями, которые могут вам не понадобиться, но заслуживают внимания)   -  person Barnabé Monnot    schedule 16.08.2013

Ответы (1)


arrow_upward
27
arrow_downward

Вот простой пример. См. также действующую версию.

var line;

var vis = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);

    vis.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    vis.on("mousemove", null);
}

Я думаю, что часть, которую вы ищете, находится в обработчике событий mousemove, где мы выбираем текущую строку и корректируем ее точку назначения в зависимости от текущего местоположения мыши. Обратите внимание, что мы включаем только mousemove в mousedown, чтобы избежать лишней обработки.

person Yony    schedule 16.08.2013