javascript - 如何实现点从a到b的移动过渡

Question

我有一个散点图，并且有两组不同的数据点，我正在从数据集中可视化。我想对从“红色”点到“蓝色”点的路径进行动画处理，并显示它们就像蓝色点从红色点移动并获得其位置一样。 d3 可以吗？如果可以，我该怎么做？

我当前绘制点的散点图是 here .

这就是我在散点图中绘制两组数据点的方法:

    // blue dots
    svg.append('g')
        .selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return x(d.x); } )
        .attr("cy", function (d) { return y(d.y); } )
        .attr("r", 4.1)
        .transition()
        .style("fill", "blue")



    // red dots
    svg.append('g')
        .selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return x(d.x1); } )
        .attr("cy", function (d) { return y(d.y1); } )
        .attr("r", 4.1)
        .style("fill", "red")
}

感谢您提前提供的任何帮助!

Answer 1

是的，这是可能的。使用属性转换并与持续时间(以毫秒为单位)结合。请看下面:

https://jsfiddle.net/mathyaku/L5bpaxwv/1/

function drawScatterplot(data, selector) {
  // set the dimensions and margins of the graph
  var margin = { top: 10, right: 30, bottom: 30, left: 60 },
    width = 700 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3.select(selector)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

  //Read the data
  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 1])
    .range([0, width]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 1])
    .range([height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));


  // Add red dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function (d) { return x(d.x1); })
    .attr("cy", function (d) { return y(d.y1); })
    .attr("r", 4.1)
    .style("fill", "red")

  svg.selectAll("circle")
    .transition()
    .duration(2000)
    .attr("cx", function (d) { return x(d.x); })
    .attr("cy", function (d) { return y(d.y); })
    .style("fill", "blue")


}

drawScatterplot(data, '#Scatterplot');