javascript - 过渡时 svg 矩形的动画位置-6ren

javascript - 过渡时 svg 矩形的动画位置

转载作者：行者123 更新时间：2023-11-30 07:54:49

编辑:这是一个例子 Fiddle:https://jsfiddle.net/3c9dtLyh/6/

我有一个布局，我正在尝试制作动画以比较两个不同日期的安排。我想要完成的是一个过渡，其中 x、y 位置在第二个日期不同的项目顺利地飞到新位置。我尝试使用设置为触发 onclick 的 updateData 函数来执行此操作。

布局看起来像这样:

我不一定期望这种方法起作用，因为转换如何知道哪些 (x,y) 对对应于新排列中的正确项目名称。关于这些转换的工作原理，我遗漏了什么？我该如何改进我的方法？

这是我使用的代码。这是一个相对简单的附加和 svg 元素序列，绘制矩形，然后(失败)在点击时更新它们的位置。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}
</style>
<body>
    <div id = "chart">
    </div>
    <div id = "select_params">

    <input name="updateButton"
           type="button"
           value="Update"
           onclick="updateData()" />

    </div>
</body>

<!-- load js libraries -->
<script src="https://d3js.org/d3.v4.min.js"></script>               <!-- uses v4 of d3 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>       <!-- need to use this older version for tipsy -->
<script type="text/javascript" src="jquery.tipsy.js"></script>  <!-- load from locally hosted source code -->

<!-- build the visualization -->
<script type='text/javascript'>
var item_width = 40, item_height = 60;

var margin = {top: 20, right: 50, bottom: 75, left: 40},
    width = 700 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("#chart").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 + ")");

d3.csv("http://localhost:8080/udacity_test_vis_1/combined_item_pos.csv", function(data) {

  // cast string to numeric
  data.forEach(function(d) {
    d.x_pos = +d.x_pos;
    d.y_pos = +d.y_pos;
    d.sales = +d.sales;
  });

  console.log(data);

  var x_offset = 5, y_offset = 5;

  x.domain(d3.extent(data, function(d) { return d.x_pos; }));        // set the x domain
  y.domain(d3.extent(data, function(d) { return d.y_pos; }));            // set the y domain

  svg.selectAll("g")
      .data(data)
    .enter()
      .append("rect")
      .filter(function(d){ return d.date == '1-20-2017'})
      .attr("class", "dot")
      .attr("width", item_width)
      .attr("height", item_height)
      .attr("x", function(d) { return x(d.x_pos) + x_offset; })              // x position of dots
      .attr("y", function(d) { return y(d.y_pos) + y_offset; })             // y position of dots
      .attr("rx", 5)
      .attr("ry", 5)
      .style("fill", "#1f5fc6")     // color factor variable
      .style("fill-opacity", 0.5);

  svg.selectAll("g")
       .data(data)
    .enter()
       .append("text")
       .filter(function(d){ return d.date == '1-20-2017'})
       .attr("x", function(d) { return x(d.x_pos) + item_width/2 + x_offset; })
       .attr("y", function(d) { return y(d.y_pos) + item_height/2 + y_offset; })
       .attr("font-size", 10)
       .attr("text-anchor", "middle")
       .attr("fill", "black")
       .text(function(d){ return d.item_name});

});


function updateData() {

    // grab the data again
    d3.csv("http://localhost:8080/udacity_test_vis_1/combined_item_pos.csv", function(data) {

      // cast string to numeric
      data.forEach(function(d) {
        d.x_pos = +d.x_pos;
        d.y_pos = +d.y_pos;
        d.sales = +d.sales;
      });

      var svg = d3.select("#chart").transition();

      svg.selectAll("g")
          .data(data)
            .enter()
          .append("rect")
          .filter(function(d){ return d.date == '2-10-2017'})
          .attr("class", "dot")
          .attr("width", item_width)
          .attr("height", item_height)
          .attr("x", function(d) { return x(d.x_pos) + x_offset; })              // x position of dots
          .attr("y", function(d) { return y(d.y_pos) + y_offset; })             // y position of dots
          .attr("rx", 5)
          .attr("ry", 5)
          .style("fill", "#1f5fc6")     // color factor variable
          .style("fill-opacity", 0.5);

    svg.selectAll("g")
        .data(data)
          .enter()
        .append("text")
        .filter(function(d){ return d.date == '2-10-2017'})
        .attr("x", function(d) { return x(d.x_pos) + item_width/2 + x_offset; })
        .attr("y", function(d) { return y(d.y_pos) + item_height/2 + y_offset; })
        .attr("font-size", 10)
        .attr("text-anchor", "middle")
        .attr("fill", "black")
        .text(function(d){ return d.item_name});


});
}

</script>

这是我的数据:

,x_pos,y_pos,item_name,sales,date
0,1,1,S8221,2022,1-20-2017
1,2,1,NLC11,518,1-20-2017
2,3,1,35UUY,1614,1-20-2017
3,4,1,PPTNV,1059,1-20-2017
4,5,1,G0CWS,2183,1-20-2017
5,6,1,3JHUA,2513,1-20-2017
6,7,1,4HXGA,2251,1-20-2017
7,8,1,RYM9K,2330,1-20-2017
8,9,1,T8PUB,1476,1-20-2017
9,10,1,PLULW,1225,1-20-2017
10,1,2,YJ6S0,2403,1-20-2017
11,2,2,E9RGD,1361,1-20-2017
12,3,2,E2SW4,1131,1-20-2017
13,4,2,BZPGX,698,1-20-2017
14,5,2,0K682,1855,1-20-2017
15,6,2,D8UZW,2371,1-20-2017
16,7,2,USKY7,1851,1-20-2017
17,8,2,D0L0Y,1767,1-20-2017
18,9,2,P1AGP,1025,1-20-2017
19,10,2,9LT7O,1380,1-20-2017
20,1,3,1J184,1108,1-20-2017
21,2,3,RJDEG,2106,1-20-2017
22,3,3,LTSLR,1980,1-20-2017
23,4,3,ET3DF,2700,1-20-2017
24,5,3,42W1W,2194,1-20-2017
25,6,3,5QTJN,958,1-20-2017
26,7,3,O8XKY,2381,1-20-2017
27,8,3,LS9NW,516,1-20-2017
28,9,3,0MPZ7,2198,1-20-2017
29,10,3,R4E3J,2494,1-20-2017
30,1,4,WFPPY,2349,1-20-2017
31,2,4,MT2DB,2525,1-20-2017
32,3,4,6DRYS,600,1-20-2017
33,4,4,NVV0S,1556,1-20-2017
34,5,4,ODGZ2,912,1-20-2017
35,6,4,E3NLS,931,1-20-2017
36,7,4,9FFZ7,722,1-20-2017
37,8,4,UKZGF,2170,1-20-2017
38,9,4,XXORI,896,1-20-2017
39,10,4,QYU9Q,1104,1-20-2017
40,1,5,4KQPU,1562,1-20-2017
41,2,5,S3AYK,2298,1-20-2017
42,3,5,5W3CE,2580,1-20-2017
43,4,5,T0S7H,1677,1-20-2017
44,5,5,02SJG,1972,1-20-2017
45,6,5,GBMNZ,1845,1-20-2017
46,7,5,2Y7KH,982,1-20-2017
47,8,5,3WMOL,1952,1-20-2017
48,9,5,93KLU,2240,1-20-2017
49,10,5,K80OQ,2467,1-20-2017
50,1,6,2SIJS,1788,1-20-2017
51,2,6,5ZJ7V,2277,1-20-2017
52,3,6,HTL99,873,1-20-2017
53,4,6,C06QP,2185,1-20-2017
54,5,6,2S1YI,580,1-20-2017
55,6,6,IQ0L8,2395,1-20-2017
56,7,6,PEE2Y,2299,1-20-2017
57,8,6,6DEWK,2019,1-20-2017
58,9,6,9FY5B,1517,1-20-2017
59,10,6,NZQ54,2624,1-20-2017
60,1,7,C4SVV,1823,1-20-2017
61,2,7,Q4C4I,2339,1-20-2017
62,3,7,996OQ,1621,1-20-2017
63,4,7,PISK6,895,1-20-2017
64,5,7,KOKHE,1315,1-20-2017
65,6,7,6P4FT,1467,1-20-2017
66,7,7,3FY75,2085,1-20-2017
67,8,7,9YCNB,992,1-20-2017
68,9,7,NXXK1,2080,1-20-2017
69,10,7,4RDHV,2031,1-20-2017
0,6,1,9FFZ7,592,2-10-2017
1,1,6,E2SW4,622,2-10-2017
2,6,7,PLULW,1699,2-10-2017
3,8,3,ET3DF,784,2-10-2017
4,9,4,KOKHE,1092,2-10-2017
5,2,6,5ZJ7V,1691,2-10-2017
6,4,5,9FY5B,630,2-10-2017
7,9,4,G0CWS,1523,2-10-2017
8,9,2,PISK6,1778,2-10-2017
9,6,4,35UUY,2107,2-10-2017
10,3,5,5QTJN,1751,2-10-2017
11,6,6,NLC11,526,2-10-2017
12,8,2,C06QP,2308,2-10-2017
13,8,3,XXORI,1453,2-10-2017
14,5,1,E9RGD,1864,2-10-2017
15,7,2,HTL99,1222,2-10-2017
16,3,3,PEE2Y,2050,2-10-2017
17,9,7,GBMNZ,1941,2-10-2017
18,3,1,T8PUB,1440,2-10-2017
19,5,1,3WMOL,2692,2-10-2017
20,7,7,S3AYK,523,2-10-2017
21,1,5,BZPGX,2245,2-10-2017
22,2,1,S8221,2241,2-10-2017
23,9,7,IQ0L8,566,2-10-2017
24,8,5,D8UZW,1769,2-10-2017
25,3,1,RYM9K,1044,2-10-2017
26,4,6,4HXGA,2650,2-10-2017
27,2,2,WFPPY,2203,2-10-2017
28,2,4,93KLU,2289,2-10-2017
29,7,3,P1AGP,1084,2-10-2017
30,4,3,3JHUA,1364,2-10-2017
31,1,4,9LT7O,1198,2-10-2017
32,4,6,4RDHV,771,2-10-2017
33,10,7,T0S7H,873,2-10-2017
34,3,6,NXXK1,2391,2-10-2017
35,8,2,2SIJS,811,2-10-2017
36,8,4,LTSLR,1670,2-10-2017
37,6,7,02SJG,1880,2-10-2017
38,9,3,0MPZ7,2090,2-10-2017
39,2,6,E3NLS,2350,2-10-2017
40,7,6,QYU9Q,1092,2-10-2017
41,6,3,0K682,894,2-10-2017
42,1,5,LS9NW,1928,2-10-2017
43,7,7,NVV0S,951,2-10-2017
44,9,4,996OQ,670,2-10-2017
45,7,6,USKY7,706,2-10-2017
46,10,4,Q4C4I,2270,2-10-2017
47,4,2,UKZGF,1691,2-10-2017
48,10,3,RJDEG,597,2-10-2017
49,10,2,1J184,1921,2-10-2017
50,2,3,5W3CE,2604,2-10-2017
51,5,5,3FY75,1260,2-10-2017
52,1,1,6DEWK,2491,2-10-2017
53,7,5,9YCNB,1743,2-10-2017
54,4,7,6DRYS,2450,2-10-2017
55,5,2,MT2DB,1292,2-10-2017
56,8,5,C4SVV,1395,2-10-2017
57,3,7,ODGZ2,2685,2-10-2017
58,10,4,2S1YI,2617,2-10-2017
59,1,2,YJ6S0,1611,2-10-2017
60,6,3,2Y7KH,2188,2-10-2017
61,5,4,4KQPU,1413,2-10-2017
62,10,1,D0L0Y,2291,2-10-2017
63,5,1,NZQ54,1405,2-10-2017
64,5,2,6P4FT,1885,2-10-2017
65,3,1,PPTNV,1442,2-10-2017
66,1,5,K80OQ,2140,2-10-2017
67,4,5,42W1W,1697,2-10-2017
68,2,7,O8XKY,1007,2-10-2017
69,10,6,R4E3J,887,2-10-2017

最佳答案

因此，我花了几分钟时间将您的代码完全重构为正确的 d3 样式。这旨在证明几件事:

正确使用enter、update、exit 模式。
删除了剪切/粘贴重复代码。
使用 g 对元素进行分组并将它们放在一起的正确方法。
如何添加过渡。

这是 code running .

注释代码:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .dot {
    stroke: #000;
  }
</style>

<body>
  <div id="chart">
  </div>
  <div id="select_params">

    <input name="updateButton" type="button" value="Update" onclick="updateData()" />

  </div>
</body>

<!-- load js libraries -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- uses v4 of d3 -->

<!-- build the visualization -->
<script type='text/javascript'>
  var item_width = 40,
    item_height = 60;

  var margin = {
      top: 20,
      right: 50,
      bottom: 75,
      left: 40
    },
    width = 700 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  var x = d3.scaleLinear()
    .range([0, width]);

  var y = d3.scaleLinear()
    .range([height, 0]);

  var color = d3.scaleOrdinal(d3.schemeCategory10);

  var svg = d3.select("#chart").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 + ")");

  // a single function to draw 
  function draw(data, someDate) {

    data.forEach(function(d) {
      d.x_pos = +d.x_pos;
      d.y_pos = +d.y_pos;
      d.sales = +d.sales;
    });

    // pre-filter data
    data = data.filter(function(d) {
      return d.date === someDate
    });

    var x_offset = 5,
      y_offset = 5;

    x.domain(d3.extent(data, function(d) {
      return d.x_pos;
    })); // set the x domain
    y.domain(d3.extent(data, function(d) {
      return d.y_pos;
    })); // set the y domain

    // create an update selection with a key function
    var g_sel = svg.selectAll("g")
      .data(data, function(d) {
        return d.item_name;
      });

    // get rid of those leaving the update
    g_sel.exit().remove();

    // our entering g
    var g_ent = g_sel.enter()
      .append("g");

    // add our rects to our g
    g_ent.append("rect")
      .attr("class", "dot")
      .attr("width", item_width)
      .attr("height", item_height)
      .attr("rx", 5)
      .attr("ry", 5)
      .style("fill", "#1f5fc6") // color factor variable
      .style("fill-opacity", 0.5);

    // add our text to our g
    g_ent.append("text")
      .attr("font-size", 10)
      .attr("text-anchor", "middle")
      .attr("fill", "black")
      .attr("dx", item_width / 2)
      .attr("dy", item_height / 2)
      .text(function(d) {
        return d.item_name
      });

    // UPDATE + ENTER selection
    g_sel = g_ent.merge(g_sel);

    // move them into position with transition
    g_sel
      .transition()
      .attr("transform", function(d) {
        return "translate(" + (x(d.x_pos) + x_offset) + "," + (y(d.y_pos) + y_offset) + ")";
      });
  }

  d3.csv("test.csv", function(data) {

    draw(data, '1-20-2017');

  });


  function updateData() {

    d3.csv("test.csv", function(data) {
      draw(data, '2-10-2017');
    });

  }
</script>

关于javascript - 过渡时 svg 矩形的动画位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42676481/

文章推荐： java - 如何使用 EWS Managed API 和 ColdFusion 搜索收件箱？

文章推荐： java - 从命令提示符运行程序时未找到 Classnotfound

文章推荐： java - @Inject 和 @Named 注释给出 NoSuchBeanDefinitionException

python - 如何知道边界框(矩形)是否位于另一个边界框(矩形)内？
我正在尝试将外框内的框(坐标)放入。我已经使用交集联合方法完成了工作，并且我希望其他方法也可以这样做。另外，能否请您告诉我如何比较这两个内盒？最佳答案通过比较边界框和内部框的左上角和右下角的坐标
Java数字模式两个三角形并排制作正方形/矩形
我希望输出看起来像这样: 如何安排这些循环以获得两个三角形数字模式？我该如何改进我的代码。 JAVA 中的新功能:-) for (int i = 1; icount; num--) {
mysql写入和读取地理边界(矩形)
我需要将 map 边界存储在 MySQL 数据库中。我花了一些时间在地理空间扩展的文档上，但是学习所有相关信息(WKT、WKB 等)很困难，而且就我而言没有必要。我只需要一种方法来存储坐标矩形并稍后将
gnuplot - 如何从文件中绘制对象(矩形)
在 gnuplot 中，我可以通过绘制一个矩形 set object rect from x0,y0 to x1,y1 如何从文件中读取坐标 x0,x1,y0,y1？最佳答案一种方法是将设置矩形的
用水平线或垂直线填充的 WPF 矩形
我正在尝试创建一个填充了水平线或垂直线的矩形。矩形的宽度是动态的，所以我不能使用图像刷。如果有人知道任何解决方案，请告诉我。最佳答案我想出了一个直接的方法来做到这一点；最后，我使用以下视觉画笔
在所有浏览器中模糊的 SVG 矩形
这个 SVG 在所有浏览器中看起来都很模糊，在所有缩放级别。在 Chrome、Safari 和 Firefox 中，它看起来像这样: 如果放大，您可以看到笔画有两个像素的宽度，即使默认笔画
r - 向ggplot2图形添加多个阴影/矩形
我正在尝试在ggplot2图上添加多个阴影/矩形。在这个可重现的示例中，我只添加了3，但是使用完整数据可能需要总计一百。这是我的原始数据的子集-在名为temp的数据框中-dput在问题的底部：
wpf3d 矩形 HitTest
我有一个包含驻留在 Viewport3D 中的 3D 对象的应用程序，我希望用户能够通过在屏幕上拖动一个矩形来选择它们。我尝试在 Viewport3D 上应用 GeometryHitTestPara
WPF 矩形 - 圆化顶角
如何才能使 WPF 矩形的顶角变成圆角？我创建了一个边框并设置了 CornerRadius 属性，并在边框内添加了矩形，但它不起作用，矩形不是圆角的。最佳答案您遇到的问题是矩形“溢
javascript - 旋转传单折线/矩形
我正在尝试使用此 question 中的代码旋转 Leaflet 矩形。 rotatePoints (center, points, yaw) { const res = [] const a
opencv - 从图像中删除框/矩形
我有以下图像。 this image 我想删除数字周围的橙色框/矩形，并保持原始图像干净，没有任何橙色网格/矩形。以下是我当前的代码，但没有将其删除。 Mat mask = new Mat(); M
math - 矩形——一道数学题
我发现矩形有些不好笑: 比方说，给定的是左、上、右和下坐标的值，所有这些坐标都旨在包含在内。所以，计算宽度是这样的: width = right - left + 1 到目前为止，一切都很合乎逻辑。
Java JFrame 矩形
所以，我一直在学习 Java，但我还是个新手，所以请耐心等待。我最近的目标是图形化程序，这次是对键盘控制的测试。由于某种原因，该程序不会显示矩形。通常，paint() 会独立运行，但由于某种原因它不会
java编码确定点是否位于多边形(矩形)内部的解决方案
我正在阅读 website 中的解决方案 3 (2D)并试图将其翻译成java代码。 java是否正确请评论。我使用的是纬度和经度坐标，而不是 x 和 y 坐标(注意:loc.getLongitude
iText 矩形 - 无法删除边框
我似乎无法删除矩形上的边框!请参阅下面的代码，我正在使用 PDFannotation 创建链接。这些链接都有效，但每个矩形都有一个边框。 PdfAnnotation annotation; Recta
c# - 在维护区域时旋转位图(矩形)
如何在保持原始位图面积的同时将位图旋转给定的度数。即，我旋转宽度:100，高度:200 的位图，我的最终结果将是一个更大的图像，但旋转部分的面积仍然为 100*200 最佳答案图形转换函数非常适合这
c# - 如何清除picturebox中的图形(矩形)
我创建了矩形用户控件，我在我的应用程序中使用了这个用户控件。在我的应用程序中，我正在处理图像以进行不同的操作，例如从图像中读取条形码等。这里我有两种处理图像的可能性，一种正在处理整个图像，另一个正在处
c# - 画线和时的奇怪行为。矩形
好的，我该如何开始呢？我有一个应用程序可以在屏幕上绘制一些形状(实际上是几千个)。它们有两种类型:矩形和直线。矩形有填充，线条有描边 + 描边厚度。我从两个文件中读取数据，一个是顶部的数据，一个是
JavaFX ActionEvent 矩形
简而言之: 我正在致力于使用 AI 和 GUI 创建纸牌游戏。用户的手显示在游戏界面上，我尚未完成界面，但我打算将牌面图像添加到屏幕上的矩形中。我没有找到 5 种几乎相同的方法，而是找到了一篇类似的文
java - ArrayList 矩形
我遇到了麻烦。我正在尝试使用用户输入的数组列表创建条形图。我可以创建一个条，但只会创建一个条。我需要所有数组输入来创建一个条。 import java.awt.Color; import java.a

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 过渡时 svg 矩形的动画位置