javascript - 添加过渡到 Zoomable Circle Packing-6ren

javascript - 添加过渡到 Zoomable Circle Packing

转载作者：行者123 更新时间：2023-11-28 18:11:06

我在 flare4.csv 中有此数据:

SplitMth,id,value
Dec,FRUIT,
Dec,FRUIT~Apples,
Dec,FRUIT~Apples~X,100
Dec,FRUIT~Pears,
Dec,FRUIT~Pears~Y,200
Dec,FRUIT~Lemon,
Dec,FRUIT~Lemon~Z,300
Jan,FRUIT,
Jan,FRUIT~Apples,
Jan,FRUIT~Apples~X,300
Jan,FRUIT~Pears,
Jan,FRUIT~Pears~Y,200
Jan,FRUIT~Lemon,
Jan,FRUIT~Lemon~Z,100

然后我得到了以下圆形包装可视化，这是对此 bl.ock 的改编:https://bl.ocks.org/mbostock/7607535

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>ZOOMABLE CIRCLE PACKING</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
    .node {
        cursor: pointer;
    }

    .node:hover {
        stroke: #000;
        stroke-width: 1.5px;
    }

    .node--leaf {
        fill: white;
    }

    .label {
        font: 9px "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-anchor: middle;
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }

    .label,
    .node--root,
    .node--leaf {
        pointer-events: none;
    }

    .clickBut {
        font-family: verdana;
        font-size: 11px;
        /*font-weight: bold;*/
        background-color: #ffa500 !important;
        border-radius: 100px;
        shape-rendering: crispEdges;
    }

    #zoomable {
        position: absolute;
        top: 35px;
        left: 25px;
        width: 250px;
        height: 250px;
    }
    </style>
</head>

<body>
    <div id="zoomable"></div>
    <input id="clickMe" type="button" value="Refresh|Reset" onclick="resetAll();" class="clickBut" />
    <select id="mth-menu"></select>
    <script type="text/javascript">
    var zoomableDataX = "flare4.csv";

    function resetAll() {
        console.log("resetAll pressed") //<< placeholder
    }

    populateMonthCombo();

    function populateMonthCombo() {
        removeOptions(document.getElementById("mth-menu"));

        d3.csv(zoomableDataX, function(rows) {

            //data for the combobox control
            dtaMths = rows.filter(function(row) {
                if ((1 === 1)) { //<< placeholder
                    return true;
                }
            }).map(function(d) {
                return {
                    "SplitMth": d.SplitMth
                };
            })

            var menu = d3.select("#mth-menu");

            menu.selectAll("option")
                .data(d3.map(dtaMths, function(d) {
                    return d.SplitMth;
                }).keys())
                .enter()
                .append("option")
                .property("selected", function(d) {
                    return d === "Jan";
                })
                .text(function(d) {
                    return d;
                });

            menu
                .on("change", function() {
                    changeCircles(this.value)
                });

        });
    };

    function removeOptions(selectbox) {
        var i;
        for (i = selectbox.options.length - 1; i >= 0; i--) {
            selectbox.remove(i);
        }
    };


    var zoomDiv = d3.select("#zoomable")

    var svg = zoomDiv.append("svg").attr("width", "250").attr("height", "250"),
        margin = 20,
        diameter = +svg.attr("width"),
        g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");


    //added>>>>>>
    var format = d3.format(",d");
    //>>>>>>>>>>>

    var color = d3.scaleLinear()
        .domain([-1, 5])
        .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
        .interpolate(d3.interpolateHcl);

    //added>>>>>>
    var stratify = d3.stratify()
        .parentId(function(d) {
            return d.id.substring(0, d.id.lastIndexOf("~"));
        });
    //>>>>>>>>>>>

    var pack = d3.pack()
        .size([diameter - margin, diameter - margin])
        .padding(2);


    function changeCircles(mth) {
        console.log(mth);
        d3.csv(zoomableDataX, function(error, data) {
            if (error) throw error;

            dta = data.filter(function(row) {
                if (row['SplitMth'] === mth) {
                    return true;
                }
            }).map(function(d) {
                return {
                    "id": d.id,
                    "value": +d.value,
                };
            })

            //added>>>>>>
            root = stratify(dta)
                .sum(function(d) {
                    return d.value;
                })
                .sort(function(a, b) {
                    return b.value - a.value;
                });
            //>>>>>>>>>>>


            var focus = root,
                nodes = pack(root).descendants(),
                view;

            var circle = g.selectAll("circle")
                .data(nodes)
                .enter().append("circle")
                .attr("class", function(d) {
                    return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
                })
                .style("fill", function(d) {
                    return d.children ? color(d.depth) : null;
                })
                .on("click", function(d) {
                    if (focus !== d) zoom(d), d3.event.stopPropagation();
                });


            var text = g.selectAll("text")
                .data(nodes)
                .enter().append("text")
                .attr("class", "label")
                .style("fill-opacity", function(d) {
                    return d.parent === root ? 1 : 0;
                })
                .style("display", function(d) {
                    return d.parent === root ? "inline" : "none";
                })
                .text(function(d) {
                    return d.id.substring(d.id.lastIndexOf("~") + 1).split(/(?=[A-Z][^A-Z])/g);
                })

            var node = g.selectAll("circle,text");

            node.append("title")
                .text(function(d) {
                    return d.id + "\n" + format(d.value);
                });

            svg
                .on("click", function() {
                    zoom(root);
                });

            zoomTo([root.x, root.y, root.r * 2 + margin]);

            function zoom(d) {
                var focus0 = focus;
                focus = d;

                var transition = d3.transition()
                    .duration(d3.event.altKey ? 7500 : 750)
                    .tween("zoom", function(d) {
                        var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
                        return function(t) {
                            zoomTo(i(t));
                        };
                    });

                transition.selectAll("text")
                    .filter(function(d) {
                        return d.parent === focus || this.style.display === "inline";
                    })
                    .style("fill-opacity", function(d) {
                        return d.parent === focus ? 1 : 0;
                    })
                    .on("start", function(d) {
                        if (d.parent === focus) this.style.display = "inline";
                    })
                    .on("end", function(d) {
                        if (d.parent !== focus) this.style.display = "none";
                    });

            }

            function zoomTo(v) {
                var k = diameter / v[2];
                view = v;
                node.attr("transform", function(d) {
                    return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
                });
                circle.attr("r", function(d) {
                    return d.r * k;
                });
            }

        })
    };

    changeCircles("Jan");
    </script>
</body>

最初渲染时，它符合预期，并将以可预测的方式缩放。
实时预览:http://plnkr.co/edit/iPIsldJn09ZyLoc3GVrX?p=preview

我希望能够做两件事，但我想第二件事需要是一个额外的问题。

如何修改代码，以便当我从输入下拉列表中选择“Dec”时，可视化效果会相应发生变化，并在单击缩放时按预期运行？

(我想将上述更改设置为像此视觉效果一样的 5 秒过渡，但这将是第二个问题: http://jsfiddle.net/VividD/WDCpq/8/ )

最佳答案

您根本没有处理更新和退出选择。您只处理输入。这是一些阅读内容here和 here .

以下是如何以正确的方式重写绘图函数:

function changeCircles(mth) {

  // Why download the file each time?

  dta = data.filter(function(row) {
    if (row['SplitMth'] === mth) {
      return true;
    }
  }).map(function(d) {
    return {
      "id": d.id,
      "value": +d.value,
    };
  })

  //added>>>>>>
  root = stratify(dta)
    .sum(function(d) {
      return d.value;
    })
    .sort(function(a, b) {
      return b.value - a.value;
    });
  //>>>>>>>>>>>


  var focus = root,
    nodes = pack(root).descendants(),
    view;

  var circle = g.selectAll("circle")
    .data(nodes, function(d){
      return d.id; //<-- add a key function to uniquely identify a node
    });

  circle.exit().remove(); //<-- those nodes leaving

  circle = circle.enter() //<-- those nodes entering
    .append("circle")
    .attr("class", function(d) {
      return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
    })
    .style("fill", function(d) {
      return d.children ? color(d.depth) : null;
    })
    .on("click", function(d) {
      if (focus !== d) zoom(d), d3.event.stopPropagation();
    })
    .merge(circle); //<-- those entering and updating

 ...

已更新plunker .

关于javascript - 添加过渡到 Zoomable Circle Packing，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41537547/

文章推荐： jQuery 检测苹果设备 css 条件

文章推荐： ios - UIActionSheet 事件未触发

文章推荐：当没有更多列表项时，Jquery 隐藏垂直滚动按钮

swift - 过渡到 UITabBarController
我需要错误修复方面的帮助。我使用 segue 在 ViewController 之间传输。我有 UITabBarController 和一个 UIViewController。当我单击 vc 中的按
android - 过渡到 FragmentActivity
我可以使用下面的代码转换到 Fragment 类，但是如何使用相同的代码转换到 FragmentActivity。 FragmentActivity activity = new ABC(); //
oop - 过渡到 OO ABAP？
似乎我们的大多数 SAP 程序员都在使用旧版本的 ABAP，这是面向对象之前的版本。我还注意到，OO 的语言更加简洁和现代(他们显然借此机会摆脱了已弃用的东西)。由于该系统尚未推出，因此进行任何重新
ios - 过渡到 ARC - 发布不引发错误
我正在尝试将现有的非 ARC 项目移动到 ARC。我已将build设置中的 Objective-C 自动引用计数标志设置为是。这当然造成了很多有关发送显式发布/自动发布消息的错误。对于代码中的错误，
javascript - 过渡到 Canvas 上绘制的曲线？
我有一条由贝塞尔曲线绘制的简单直线。挑战是改变它过渡的位置，即如果曲线的高度增加或减少，它应该在过渡中发生，而不是突然发生。所以我的问题是提供 Canvas 鼠标悬停时的过渡？如何提供曲线过渡？ ca
php - 过渡到 MVC 编码的最佳方式是什么？
自从我拿起一本 PHP 书籍并开始使用 PHP 编码已经过去了大约 5 个月。起初，我在没有任何组织计划或 MVC 的情况下创建了我所有的网站。我很快发现那很痛苦..然后我开始在 stackoverf
jedis - 从 JedisPool 过渡到 JedisCluster
我的应用程序使用 AWS 上的 ElastiCache 进行缓存。我们当前的设置使用基本的 Redis 集群，没有分片或故障转移。我们现在需要迁移到启用了分片、故障转移等的集群 Redis 弹性缓存。
svn - 将多头项目从 SVN 过渡到 HG
我们正在加入现代世界并从 SVN 过渡到 Mercurial 以进行源代码控制。其中大部分非常简单——只需将当前主干导入 HG 并进行克隆。一个项目有点花哨，我没有看到正确的方法来做到这一点。有问题
python - tensorflow 过渡到 GPU 版本
我已经使用 tensorflow 一段时间了，一切正常，直到我尝试切换到 gpu 版本。卸载了以前的tensorflow， pip 安装 tensorflow-gpu (v2.0) 下载并安装vis
swagger - 过渡到 Swashbuckle 5.0
我通过 Swashbuckle V4 使用 Swagger，并使用 API key 对端点进行身份验证。使用 Swashbuckle V4 时，以下配置完美运行(请注意，仅显示 Swagger 代码
java - 从 Castor 过渡到 JPA
我正在努力使我的 java 应用程序更符合标准，我面临的最大问题之一是将我们的 ORM 框架从 Castor JDO 转换为 JPA 实现(考虑 Hibernate 或 DataNucleus)。我们
javascript - Ember JS 过渡到/链接到回调
我希望在每次点击链接或在 EmberJS 中调用 transitionTo 时触发回调。我想这样做的原因是隐藏在进行转换时可能打开的菜单/下拉菜单。我不知道从哪里开始。我的 Google-fu 可能很
ios - 过渡到 Xcode 5 错误和丢失数据
我当时使用的是 Xcode 4.6.1，并且已经创建了一个由 apple 批准并在 App Store 上的 iphone/ipad 应用程序。它是为 5.1 的最低部署目标而构建的现在是时候让它与
ios - 从 UIViewController 过渡到 TabBarViewController
我已经寻找解决方案 6 个小时了，但没有找到适合我情况的解决方案。我的 Storyboard遵循以下流程: TabBarViewController -> NavigationController -
ios - 从 SKScene 过渡到 UIViewcontroller
例如，如果我有: class SpriteKitScene: SKScene { ... } 在那里我想要一个图像，当点击(按下，点击，触摸任何东西)时载入另一个文件: class UiViewcon
ios - 使用数据从 XIB 过渡到 Storyboard
所以我找到了一个如何从XIB过渡到storyboard的例子 NSString * storyboardName = @"CheckoutStoryboard"; UIStoryboard *stor
swift - 过渡到 ViewController 点击 TableViewCell
如何通过点击表格 View 单元格来转换到 View Controller ？我目前的结构是: 我使用 navigation controller 作为我在我的应用程序 atm 中导航的唯一方式。我
ios - 如何从 UIViewController 过渡到 UINavigationController
我正在尝试通过 segue 转换(模态)到 UINavigationController来自UIViewController .我的UIViewController和 UINavigationCont
ios - 如何从自定义 View 过渡到 AVPlayerViewController？
我有一个自定义 View : class MediaPlayerView: UIView { var mediaURL: URL? { didSet {
java - 从 Java 过渡到 C++
根据语言的发明时间和语言的结构，这种转变可能意味着要走另一条路，但我对我的 Java 能力相当有信心，或者至少我在这方面足够好。但我现在正在尝试使用 C++，但我遇到了困难。在 java 中，读取一

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 添加过渡到 Zoomable Circle Packing