javascript - D3 形状跟随路径-6ren

javascript - D3 形状跟随路径

转载作者：行者123 更新时间：2023-11-29 15:27:55

您好，这是我的第一篇文章。我已经搜索了一个很好的教程来帮助完成这个 D3 折线图 - 但没有找到我要找的东西。我需要做的就是让橙色圆圈遵循与虚线相同的路径。目前它有一条直线路径。感谢您对此提供的任何帮助。

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
<html lang="en"><!--<![endif]-->

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Drawdown line chart</title>

    <script src="http://d3js.org/d3.v3.min.js"></script>

    <style>
    body {font: 15px sans-serif;}
    .container{max-width:990px}
    h2{float:left; width:100%; text-align:center; font-size:30px; color:#666666; margin:20px 0 30px}
    .highlight{color:#f26522}
    #chart{width:90%; margin:0 10%}

    .domain {fill: none; stroke: gray; stroke-width: 1;}

    </style>


</head>

    <body> 

        <div class="container">

            <h2>Click the <span class="highlight">orange dot</span> to start:</h2>

            <div class="row">
                <div id="chart" class="col-sm-12">

                </div>
            </div>

        </div>

        <script type="text/javascript">

            // Chart data
            var dataArray = [
            {"x":0, "y":100000},
            {"x":1, "y":90000},
            {"x":2, "y":83000},
            {"x":3, "y":73000},
            {"x":4, "y":79000},
            {"x":5, "y":72000},
            {"x":6, "y":75000},
            {"x":7, "y":88000},
            {"x":8, "y":63000},
            {"x":9, "y":71000},
            {"x":10, "y":69000},
            {"x":11, "y":63000},
            {"x":12, "y":67000},
            {"x":13, "y":63000},
            {"x":14, "y":59000},
            {"x":15, "y":46000},
            {"x":16, "y":40000},
            {"x":17, "y":32000},
            {"x":18, "y":29000},
            {"x":19, "y":20000},
            {"x":20, "y":18000},
            {"x":21, "y":17000},
            {"x":22, "y":9000},
            {"x":23, "y":0},
            {"x":24, "y":0},
            {"x":25, "y":0},
            {"x":26, "y":0},
            {"x":27, "y":0},
            {"x":28, "y":0},
            {"x":29, "y":0},
            {"x":30, "y":0}
            ];


            // Variables

            var currentAge = 65
            var longevity = 92
            var yearsToLive = longevity - currentAge
            var years = dataArray.length
            var totalDrawdown = dataArray[0].y 
            var chartWidth = 800
            var chartHeight = 400
            var chartMargin = 20
            var axisHeight = 20

            var widthScale = d3.scale.linear()
                .domain([currentAge, currentAge + years])
                .range([0, chartWidth - chartMargin]);

            var axis = d3.svg.axis()
                .ticks(5)
                .tickSize(20)
                .scale(widthScale);

            // Chart scaling
            x_scale = d3.scale.linear().domain([0,years]).range([0, chartWidth]);
            y_scale = d3.scale.linear().domain([0,totalDrawdown]).range([chartHeight - chartMargin,0]);


            var lineFunction = d3.svg.line()
                .x(function(d) { return x_scale(d.x) })
                .y(function(d) { return y_scale(d.y) });


            function getSmoothInterpolation() {
                var interpolate = d3.scale.linear()
                        .domain([0,1])
                        .range([1, dataArray.length + 1]);

                return function(t) {
                        var flooredX = Math.floor(interpolate(t));
                        var interpolatedLine = dataArray.slice(0, flooredX);

                        if(flooredX > 0 && flooredX < dataArray.length) {
                            var weight = interpolate(t) - flooredX;
                            var weightedLineAverage = dataArray[flooredX].y * weight + dataArray[flooredX-1].y * (1-weight);
                            interpolatedLine.push({"x":interpolate(t)-1, "y":weightedLineAverage});
                        }

                        return lineFunction(interpolatedLine);
                    }
                }


            // Canvas   
            var canvas = d3.select ("#chart")
                .append("svg")
                .attr("width", chartWidth)
                .attr("height", chartHeight + axisHeight)
                .attr("id", "lineChart");


            // Longevity marker
            var rectangle = canvas.append("rect")
                .attr("width", (chartWidth/years) * ((currentAge + years) - longevity))
                .attr("height", chartHeight - chartMargin)
                .attr("x",  (chartWidth/years) * (longevity - currentAge) )
                .attr("fill","#f2f2f2");


            // Destination range

            var outer = canvas.append("rect")
                .attr("width", 200)
                .attr("height", 10)
                .attr("x",  525 )
                .attr("y",  380 )
                .attr("fill","#f2f2f2");

            var inner = canvas.append("rect")
                .attr("width", 75)
                .attr("height", 10)
                .attr("x",  588 )
                .attr("y",  380 )
                .attr("fill","#d1d1d1");    


            var likely = canvas.append("rect")
                .attr("width", 10)
                .attr("height", 10)
                .attr("x",  620 )
                .attr("y",  380 )
                .attr("fill","#666666");    


            // Chart path
            canvas.append("path")
                .attr("stroke-width", 2)
                .attr("stroke", "gray")
                .attr("fill", "none")
                .attr("id", "journey")
                .style("stroke-dasharray", ("3, 3"))
                .attr("transform", "translate(" + chartMargin + ", 0)")

            // Moving circle
            var marker = canvas.append("circle")
                .attr("id", "marker")
                .attr("cx", 5 + chartMargin)
                .attr("cy", 10)
                .attr("r", 10)
                .attr('fill', '#f26522');


            // Add x axis
            canvas.append("g")
                .attr("transform", "translate("+ chartMargin + "," + (chartHeight - chartMargin) + ")")
                .attr("fill","#aaaaaa")             
                .call(axis);



            // Add start button
            d3.select('#lineChart')
                .append('circle')
                .attr("cx", 5 + chartMargin)
                .attr("cy", 10)
                .attr("r", 10)
                .attr('fill', '#f26522')
                .on('click', function() {
                    d3.select('#lineChart > #journey')
                        .transition()
                        .duration(6000)
                        .attrTween('d', getSmoothInterpolation );


                    d3.select('#lineChart > #marker')
                        .transition()
                        .duration(6000)
                        .attrTween("cx", function (d, i, a) { return d3.interpolate(a, 620) })
                        .attrTween("cy", function (d, i, a) { return d3.interpolate(a, 400) });

                });

            </script>

    </body>

</html>

最佳答案

这是我的尝试:

而不是像这样在点击函数中通过过渡来平移圆圈:

           d3.select('#lineChart > #marker')
                .transition()
                .duration(6000)
                .attrTween("cx", function (d, i, a) { return d3.interpolate(a, 620) })
                .attrTween("cy", function (d, i, a) { return d3.interpolate(a, 400) });

在路径动画中也移动圆圈动画，如下所示:

function getSmoothInterpolation() {
                var interpolate = d3.scale.linear()
                        .domain([0,1])
                        .range([1, dataArray.length + 1]);

                return function(t) {
                        var flooredX = Math.floor(interpolate(t));
                        var interpolatedLine = dataArray.slice(0, flooredX);
                        if(flooredX > 0 && flooredX < dataArray.length) {
                            var weight = interpolate(t) - flooredX;
                            var weightedLineAverage = dataArray[flooredX].y * weight + dataArray[flooredX-1].y * (1-weight);
                            interpolatedLine.push({"x":interpolate(t)-1, "y":weightedLineAverage});
                            //get the length of the path
                            var len = d3.select("#journey").node().getTotalLength();
                            //get the svg point at that length
                            var pt = d3.select("#journey").node().getPointAtLength(len);
                            //translate the circle to that point.
                            d3.select('#lineChart > #marker').attr("transform", "translate(" +pt.x + "," + pt.y + ")");
                        }

                        return lineFunction(interpolatedLine);
                    }
                }

工作代码here

关于javascript - D3 形状跟随路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37409019/

文章推荐： javascript - 如何在 R 中抓取 javascript 表？

文章推荐：适用于不同屏幕和操作系统版本的 Android WebView 文本缩放

python - Tensorflow Assign 要求两个张量的形状匹配。 lhs 形状= [20] rhs 形状= [48]
我是 TensorFlow 菜鸟。我已经从 deeppose 的开源实现中训练了一个 TensorFlow 模型，现在必须针对一组新图像运行该模型。该模型是在大小为 100 * 100 的图像上训练
形状=圆形的节点的大小
我正在尝试以这种方式设置节点的大小: controller[shape=circle,width=.5,label="Controller",style=filled,fillcolor="#8EC1
excel - 如何在选择中的每个单元格周围添加文本框/形状？
是否有 VBA 代码可以在选择的每个单元格周围添加文本框。文本框应该是单元格的大小(类似于边框)？最佳答案您可以使用 .AddTextbox方法。循环遍历您选择的单元格，并使用单元格的尺寸属性来设
平铺张量的 tensorflow 形状
我有一个变量 a尺寸 (1, 5) 我想“平铺”的次数与我的小批量的大小一样多。例如，如果小批量大小为 32，那么我想构造一个张量 c维度为 (32, 5)，其中每一行的值与原始 (1, 5) 变量
java - 在JavaFX中指定时间显示文本/形状
我在使用 javaFX 时遇到问题。我想每 1000 毫秒在应用程序窗口中显示一次时间。 public class Main extends Application { StackPane root
单击时的 JavaFX 形状
所以我目前正在创建这个 API。这个登录类应该只创建一个场景，其中包含制作 GUI 所需的所有框。我遇到的问题是，单击时我的形状不会执行任何操作。我有事件监听器，但它不起作用。 import
python turtle 形状
我正在用 python turtle 画一些东西，我使用了形状函数，但是形状 overdraw 了它们之前的其他形状(我可以看到形状在移动)，并且我只得到了最后一个形状: `up() goto(-20
python - 如何将选定的数据转换为相同的长度(形状)
我正在读取多个 .csv 文件作为具有相同形状的 panda DataFrame。对于某些索引，某些值为零，因此我想选择具有相同形状的每个索引的值，并为相同的索引放置零值并删除零以成为相同的形状: a
c# - 查找周长上的点以表示边界/形状
我有一个简单的二维网格，格式为 myGrid[x,y] 我正在尝试找到一种方法来找到围绕选定网格的周长，这样我就有了一个可供选择的形状。这是我的意思的一个例子: 这里的想法是找到所有相关的“角”，也
swift - 根据路径更改响应模型/形状
我有一个网络层，用于调用多个端点。我想减少重复代码的数量，并认为也许我可以将响应模型作为端点的一部分传递。这个想法是不需要多个仅因响应而不同的函数，我可以调用我的网络层并根据路径进行设置。我看到的
Android自定义 ImageView 形状
我正在创建一个自定义 ImageView，它将我的图像裁剪成六边形并添加边框。我想知道我的方法是否正确，或者我是否以错误的方式这样做。有很多自定义库已经在执行此操作，但开箱即用的库中没有一个具有我正在
python - 从节点云中查找几何(形状)
我正在编写一些代码，这些代码需要识别一些基于节点云的相当基本的几何图形。我会对检测感兴趣: 板(简单有界平面) 圆柱体(两个节点循环) 半圆柱(圆弧+直线+圆弧+直线) 圆顶(n*loop+top n
带有边框和角截断的 iOS 形状
我有这个形状: http://screencast.com/t/9UUhAXT5Wu 但边界在截止点处没有跟随它 - 我该如何解决？这是我当前 View 的代码: self.view.backgro
c++ - 简单的嵌套循环问题。 * 形状 *
我现在脑震荡，所以我想问一个非常简单的问题。目前，我正在尝试打印出这样的开头当输入为 7 时，输出为 * ** * ** * ** * 这里是我的代码，它打印 14 次而不是 7 次，或者当我输入
导航选项卡上的 CSS 形状
我想生成如下设计。计划选项卡顶部的"new"。我使用的属性适用于 chrome 和 mozilla，但在 Edge 中出现故障。以下是我在 chrome 中应用的样式: a.subnav__item
形状中的 Android 形状
我想要一个带有两种颜色边框轮廓的 shape 元素。我可以使用 solid 元素做一个单一的颜色轮廓，但这只允许我画一条线。我尝试在我的形状中使用两个 stroke 元素，但这也不起作用。有没有办法
ios - 如何绘制不同颜色的填充路径/形状
我需要为屏幕上的形状着色任何我想要的颜色。我目前正在尝试使用 UIImage 来执行此操作，我想根据自己的需要重新着色。据我所知，执行此操作的唯一方法是获取 UIImage 的各个像素，这需要更多我想
java - 面向对象的设计 - 形状
因此，经过多年的 OOP，我从我的一门大学类(class)中得到了一个非常简单的家庭作业，以实现一个简单的面向对象的结构。要求的设计: 实现面向对象的解决方案以创建以下形状: 椭圆、圆形、正方形、矩
CSS3 形状 - 什么是可能的？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
css - 制作一个笨拙的 div 形状
我想知道是否可以使用类似于以下的 div 制作复杂的形状: 它基本上是一个四 Angular 向内收缩的圆 Angular 正方形。目标是使用背景图像来填充它。我可以使用具有以下 SVG 路径的剪辑蒙

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3 形状跟随路径