首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使d3中的最后一个节点可缩放sunburst作为超链接?

在d3中使最后一个节点可缩放sunburst作为超链接,可以通过以下步骤实现:

  1. 创建一个d3的sunburst布局,并设置合适的宽度和高度。
  2. 使用d3.json()方法加载数据源,该数据源应包含层次结构的节点信息。
  3. 使用d3.partition()方法对数据进行分区,并设置合适的大小范围。
  4. 使用d3.arc()方法创建弧形生成器,用于绘制sunburst的弧形路径。
  5. 使用d3.select()方法选择要绘制sunburst的容器元素,并创建一个<svg>元素。
  6. 使用d3.selectAll()方法选择所有的路径元素,并绑定数据。
  7. 使用enter()方法创建新的路径元素,并设置路径的样式和属性。
  8. 使用on()方法监听鼠标事件,当鼠标悬停在最后一个节点上时,执行相应的操作。
  9. 在鼠标事件的处理函数中,可以使用d3.zoom()方法实现节点的缩放功能。
  10. 在缩放功能中,可以将最后一个节点的数据作为参数传递给超链接,以实现跳转到其他页面的功能。

下面是一个示例代码:

代码语言:txt
复制
// 1. 创建sunburst布局
var width = 500;
var height = 500;
var radius = Math.min(width, height) / 2;

var sunburst = d3.partition()
    .size([2 * Math.PI, radius]);

// 2. 加载数据源
d3.json("data.json", function(error, data) {
    if (error) throw error;

    // 3. 数据分区
    var root = d3.hierarchy(data)
        .sum(function(d) { return d.value; })
        .sort(function(a, b) { return b.value - a.value; });

    sunburst(root);

    // 5. 创建SVG容器
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // 6. 绑定数据并创建路径元素
    var path = svg.selectAll("path")
        .data(root.descendants())
        .enter()
        .append("path")
        .attr("d", d3.arc()
            .startAngle(function(d) { return d.x0; })
            .endAngle(function(d) { return d.x1; })
            .innerRadius(function(d) { return d.y0; })
            .outerRadius(function(d) { return d.y1; })
        )
        .style("fill", function(d) { return d.data.color; })
        .on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut);

    // 8. 鼠标悬停事件处理函数
    function handleMouseOver(d) {
        if (d === root) return;

        // 判断是否为最后一个节点
        if (!d.children) {
            // 设置超链接
            d3.select(this)
                .attr("cursor", "pointer")
                .on("click", function() {
                    window.location.href = d.data.link;
                });
        }

        // 执行缩放操作
        d3.select(this).transition()
            .duration(200)
            .attr("d", d3.arc()
                .startAngle(function(d) { return d.x0; })
                .endAngle(function(d) { return d.x1; })
                .innerRadius(function(d) { return d.y0; })
                .outerRadius(function(d) { return d.y1; })
            );
    }

    // 9. 鼠标移出事件处理函数
    function handleMouseOut(d) {
        if (d === root) return;

        // 执行缩放操作
        d3.select(this).transition()
            .duration(200)
            .attr("d", d3.arc()
                .startAngle(function(d) { return d.x0; })
                .endAngle(function(d) { return d.x1; })
                .innerRadius(function(d) { return d.y0; })
                .outerRadius(function(d) { return d.y1; })
            );
    }
});

在上述代码中,我们使用d3.partition()方法对数据进行分区,并使用d3.arc()方法创建弧形生成器来绘制sunburst的路径。通过监听鼠标事件,当鼠标悬停在最后一个节点上时,我们设置了超链接,并使用d3.zoom()方法实现了节点的缩放功能。

请注意,这只是一个示例代码,实际应用中需要根据具体需求进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

数据可视化之美:经典案例与实践解析

这几年数据可视化作为一个新研究领域也变得越来越火。成功可视化,如果做得漂亮,虽表面简单却富含深意,可以让观测者一眼就能洞察事实并产生新理解。...地理信息可视化 在第一个例子,我们已经见识到了地理信息可视化魅力。接下来我们简单了解下如何利用Remap包快速绘制交互地图数据可视化。...D3(https://d3js.org/) D3 是最流行可视化库之一,它被很多其他表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document。...可以通过D3Sunburst Partition可视化探索。...灵活使用Sunburst路径统计图,是我们在路径分析一大法宝(动图链接:https://bl.ocks.org/mbostock/4063423)。

2.2K71

数据可视化实践之美

随着DT时代到来,传统统计图表很难对复杂数据进行直观地展示。这几年数据可视化作为一个新研究领域也变得越来越火。...3 地理信息可视化 在第一个例子,我们已经见识到了地理信息可视化魅力。接下来我们简单了解下如何利用Remap包快速绘制交互地图数据可视化。...D3(https://d3js.org/) D3 是最流行可视化库之一,它被很多其他表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document。...你可以使用它用一个数组创建基本HTML表格,或是利用它流体过度和交互,用相似的数据创建惊人SVG条形图。 比如D3可以非常容易地绘制交互桑基图。...通过提取特定人群或特定模块之间路径数据,并使用Sunburst事件路径图进行分析,可以定位到更深层次问题。灵活使用Sunburst路径统计图,是我们在路径分析一大法宝。点击link查看动图。

1.9K70
  • echarts 旭日图sunburst

    1、配置数据 数据结构上,内圈是外圈节点 [ { value:n, 数值,根据同层所有数值占比,构成百分比圆环,不写为内部第一层children数值和...若设置值大于内部第一层数值,即表示有未显示内容,具体表示图会压缩同层其他环占比 name:'显示内容', link:'点击此节点跳转超链接', nodeClick值为'link...nodeClick:'zoomToNode' 点击节点缩放节点 false:节点点击无反应 'link':如果节点数据中有 link 点击节点后会进行超链接跳转。...并且大于子元素之和,可以用来表示还有其他子元素未显示 children: [ { value: 5, name: 'child1', children: [{ value: 8, //根据第一层节点...value数值,来进行占比绘制,若第一层无value,则根据第一层子节点value进行占比 name: 'grandchild1', }] }, { value: 3, name: 'child2

    1K10

    数据视觉盛宴—数据可视化实践之美

    随着DT时代到来,传统统计图表很难对复杂数据进行直观地展示。这几年数据可视化作为一个新研究领域也变得越来越火。...地理信息可视化 在第一个例子,我们已经见识到了地理信息可视化魅力。接下来我们简单了解下如何利用Remap包快速绘制交互地图数据可视化。...1.D3(https://d3js.org/) D3 是最流行可视化库之一,它被很多其他表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document。...你可以使用它用一个数组创建基本HTML表格,或是利用它流体过度和交互,用相似的数据创建惊人SVG条形图。 ? 比如D3可以非常容易地绘制交互桑基图。...通过提取特定人群或特定模块之间路径数据,并使用Sunburst事件路径图进行分析,可以定位到更深层次问题。灵活使用Sunburst路径统计图,是我们在路径分析一大法宝。

    1.9K80

    数据可视化实践之美

    开篇主要是介绍了一些常用数据可视化工具和图表,让各位看官对数据可视化有一个较为全面的认识。后续篇章会深入介绍如何运用工具绘制精美图表技术细节。...随着DT时代到来,传统统计图表很难对复杂数据进行直观地展示。这几年数据可视化作为一个新研究领域也变得越来越火。...地理信息可视化 在第一个例子,我们已经见识到了地理信息可视化魅力。接下来我们简单了解下如何利用Remap包快速绘制交互地图数据可视化。...你可以使用它用一个数组创建基本HTML表格,或是利用它流体过度和交互,用相似的数据创建惊人SVG条形图。 比如D3可以非常容易地绘制交互桑基图。...通过提取特定人群或特定模块之间路径数据,并使用Sunburst事件路径图进行分析,可以定位到更深层次问题。灵活使用Sunburst路径统计图,是我们在路径分析一大法宝。

    1.6K60

    基于Echarts4.0实现旭日图

    昨天Echarts4.0正式发布,随着4.0而来是一系列更新,挑几个主要简单说明: 1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级数据量 2.针对移动端优化,移动端小屏上适于用手指在坐标系中进行缩放...可选 SVG 渲染模块让图表在移动端更加节省内存。 3.增加多种渲染方案,实现跨平台使用,现有三种方案,渲染Canvas、SVG(4.0+)、VML 形式渲染图表。...这时,将使用子元素 value 之和作为父元素 value。如果 value 大于子元素之和,可以用来表示还有其他子元素未显示。...series[i]-sunburst.data[i].name 字符串 显示在扇形块描述文字。...series[i]-sunburst.data[i].children 数组 子节点,递归定义,格式同 series-sunburst.data。

    2.4K70

    D3可视化:让您仪表板更上一层楼

    对于数据可视化与解释等任务,D3打开了一系列可能性,使您新建极具体数据显示。 您应该记住,D3不是您可视化需求全能修复工具。...如何实现D3进行可视化数据 尽管有人认为学习曲线比正常情况更为陡峭,但D3 js可视化工具非常灵活且功能强大,可以在决定如何实现它们时为您提供创意许可。...纽约时报例子使用Canvas而非SVG,这有利于栅格化矢量。但使用SVG可根据其缩放图形及无损调整大小能力提供相同动态动画与定制性。...诸如强制定向网络或树形环一类图表可以很好地表示来自同一分支内节点信息可视化或理解不同数据点是如何连接并相互交互。...使用D3可以使其变为动态图表,使您通过选择特定行数高亮显示单个节点、检查特定连接或了解不同分支上数据点间关系。 可折叠树来映射层次结构和决策 一些数据涉及比较点不同以基于不同决策观察多重结果。

    5.1K10

    数据可视化基本套路总结

    对于数据可视化,最重要东西从来不是图形、工具、配色这些套路性东西,而在于创意和灵感。你又不是参加比赛,并不需要那么多创意灵感。在日常工作,还是以实用为主,所以掌握套路还是很必要。...正如折线图和面积图一样,概率密度曲线图也自由选择要不要面积投影。这个图太学术了,一般出现在数学教材(比如正态分布……)。 雷达图 ? 雷达图 很多游戏中的人物能力极向对比就是以雷达图表示。...矩形树图 矩形树图本质就是决策树可视化,只不过排成矩形。它也是把各个变量层层细分,这一点跟sunburst图类似。当变量比较多时候,做成交互缩放形式更合适。 平行坐标图 ?...映射什么数据变量,它是连续还是离散? 标度(scale):这个是从数据剥离,但是控制数据如何映射到图形上属性。图形中用什么通道来映射?常用有颜色、长度、面积、形状、透明度等通道。...可以生成一张pdf矢量图,然后导入PS或AI,这样对每一个元素操作都很方便。生物AI插图素材获取和拼装指导 文章用图修改和排版(2) DataV 最后友情帮助阿里打个广告。

    2.6K20

    JavaScript图表数据可视化:比较D3和Kendo UI

    我想要实现图表(在Excel绘制,以保持中立)是: ? 此外,为了展示如何做一些基本动画,我们还添加了一些工具提示,以便在鼠标滑过其中一个栏时,可以看到该栏显示值。...X轴是根据数据集中数量进行缩放。在下一节,我们将在显示区域略微移动图表。 现在我们开始讲D3部分内容。在这里,我们告诉D3我们将使用哪些数据,并指定图表每个条形图基本元素。...下一个步骤 让我们更进一步,首先,关闭那些网格线,使我们两个图表匹配。通过向kendoChart添加两个部分,在Kendo UI代码很容易做到这一点。...有一些小细节我可以调整使他们完全一样,但这是足够接近。 ? Tool Tips 最后一件事,我将添加到两个图表是一组工具提示给我们数据细节,当我们悬停在任何条。这将突出显示我们如何添加动画。...它还使用了我指定“steelblue”,并添加了一些阴影使它看起来更有趣。 最后,它添加了网格线。这是两个库之间不同方法一个很好例子。D3只做我说,只做我说

    11.9K30

    python数据可视化从入门到实战_大数据可视化概念

    对于数据可视化,最重要东西从来不是图形、工具、配色这些套路性东西,而在于创意和灵感。你又不是参加比赛,并不需要那么多创意灵感。在日常工作,还是以实用为主,所以掌握套路还是很必要。...矩形树图 矩形树图 矩形树图本质就是决策树可视化,只不过排成矩形。它也是把各个变量层层细分,这一点跟sunburst图类似。当变量比较多时候,做成交互缩放形式更合适。...桑基图主要用法是表征流量在各个层级流动关系,上一层如何向下一层分散,下一层如何由下一层汇聚。...映射什么数据变量,它是连续还是离散? 标度(scale):这个是从数据剥离,但是控制数据如何映射到图形上属性。图形中用什么通道来映射?...可以生成一张pdf矢量图,然后导入PS或AI,这样对每一个元素操作都很方便。生物AI插图素材获取和拼装指导 文章用图修改和排版(2) DataV 最后友情帮助阿里打个广告。

    89330

    Python5个数据可视化工具

    Plotly基于plotly.js,而plotly.js又基于D3.js,因此它是一个高级图表库,与Bokeh一样,Plotly 强项是制作交互式图 ,有超过30种图表类型, 提供了一些在大多数库没有的图表...D3并不要求您将自己绑定到任何专有框架,因为现代浏览器拥有D3所需一切,它还用于组合强大可视化组件和数据驱动DOM操作方法。 D3.js是目前市场上最好数据可视化库。...而且只是D3.js一个python包装器。 R提供D3可视化接口。使用 r2d3 ,您可以将数据从R绑定到D3可视化。...使用 r2d3 创建D3可视化就像RStudio,R Markdown文档和Shiny应用程序R图一样工作。...Sequences Sunburst — Kerry Rodden’s Block (Source) ?

    4.4K21

    【数据分析】如何做用户行为路径分析?

    通过提取特定人群或特定模块之间路径数据,并使用sunburst事件路径图进行分析,可以定位到更深层次问题。灵活使用sunburst路径统计图,是我们在路径分析一大法宝。...网页与网页之间通过超链接结合在一起,如同微博上社交网络通过关注行为连接起来,社交网络中有影响力很大知名权威大V们,互联网上也存在着重要性或权威性很高网页。...我们将社交网络的人看作一个节点,将互联网网页看作一个节点,甚至可以将我们App产品一个模块事件看作一个节点节点节点之间通过各自方式连接组成了一个特定网络图,以下将基于这些网络结构分析方法统称为社会网络分析...社会网络分析存在一些较为常见分析方法可以运用到我们路径分析来,如节点中心性分析,节点影响力建模,社区发现等。...今后有机会可能会以案例方式分享如何做用户路径分析,展示分析过程步骤与思路,希望能和大家多多交流。

    3.6K50

    第64篇:史上最严重APT供应链攻击事件,借助Solarwinds攻击欧美的流程图梳理和分析(上篇)

    自2020年12月12日,此APT攻击事件被曝光之后,该APT组织是如何获取solarwinds外网权限,一直没有一个让大家信服调查结果,目前普遍认为有以下几种可能: 1 Github密码泄露。...接下来ABC_123就列举出几个关键时间节点,让大家对APT组织严密工作计划有个直观认识。 2019年1月30日,该APT组织登录了一个员工VPN账号,猜测是寻找并分析SVN源码服务器。...Sunburst后门代码,从而导致安装更新包用户被种植后门。...如果目标不重要,攻击者会通过C2发出指令,使Sunburst退出或者永久禁用。...后续ABC_123会专门写文章介绍Sunburst后门设计思路,如何绕过层层流量监控以及美国网络安全公司如何将此次攻击事件溯源出来,敬请期待。

    70020

    Python奇淫技巧,5个数据可视化工具

    Plotly基于plotly.js,而plotly.js又基于D3.js,因此它是一个高级图表库,与Bokeh一样,Plotly 强项是制作交互式图 ,有超过30种图表类型, 提供了一些在大多数库没有的图表...D3并不要求您将自己绑定到任何专有框架,因为现代浏览器拥有D3所需一切,它还用于组合强大可视化组件和数据驱动DOM操作方法。 D3.js是目前市场上最好数据可视化库。...而且只是D3.js一个python包装器。 R提供D3可视化接口。使用 r2d3 ,您可以将数据从R绑定到D3可视化。...使用 r2d3 创建D3可视化就像RStudio,R Markdown文档和Shiny应用程序R图一样工作。...Sequences Sunburst — Kerry Rodden’s Block (Source) ?

    4.1K30

    Python奇淫技巧,5个数据可视化工具

    Plotly基于plotly.js,而plotly.js又基于D3.js,因此它是一个高级图表库,与Bokeh一样,Plotly 强项是制作交互式图 ,有超过30种图表类型, 提供了一些在大多数库没有的图表...D3并不要求您将自己绑定到任何专有框架,因为现代浏览器拥有D3所需一切,它还用于组合强大可视化组件和数据驱动DOM操作方法。 D3.js是目前市场上最好数据可视化库。...而且只是D3.js一个python包装器。 R提供D3可视化接口。使用 r2d3 ,您可以将数据从R绑定到D3可视化。...使用 r2d3 创建D3可视化就像RStudio,R Markdown文档和Shiny应用程序R图一样工作。...Sequences Sunburst — Kerry Rodden’s Block (Source) ?

    3.5K20

    Python奇淫技巧,5个炫酷数据可视化工具

    Plotly基于plotly.js,而plotly.js又基于D3.js,因此它是一个高级图表库,与Bokeh一样,Plotly 强项是制作交互式图 ,有超过30种图表类型, 提供了一些在大多数库没有的图表...D3并不要求您将自己绑定到任何专有框架,因为现代浏览器拥有D3所需一切,它还用于组合强大可视化组件和数据驱动DOM操作方法。 D3.js是目前市场上最好数据可视化库。...而且只是D3.js一个python包装器。 R提供D3可视化接口。使用 r2d3 ,您可以将数据从R绑定到D3可视化。...使用 r2d3 创建D3可视化就像RStudio,R Markdown文档和Shiny应用程序R图一样工作。...Sequences Sunburst — Kerry Rodden’s Block (Source) ?

    8.1K74

    D3.js库-1-入门篇

    D3使你有能力借助HTML,SVG和CSS来生动地可视化各种数据** D3不需要你使用某个特定框架,它重点在于对现代主流浏览器兼容,同时结合了强大可视化组件,以数据驱动方式去操作DOM 通过上述表达...解压后,在HTML文件包含相关js文件即可 [D3.js]https://github.com/d3/d3/releases/download/v5.16.0/d3.zip 通过采用...DOM:文档对象模型,用于修改文档内容和结果 SVG:缩放矢量图形,用于绘制可视化图形 以上知识点没有必要掌握非常精通,建议到W3school快速入门,了解基本概念,再看几个案例demo,以后遇到不懂地方可以进行查看...HTML 到 CSS,乃至进阶 XML、SQL、JS、PHP 等 HTML+CSS快速入门 初识HTML(5)+CSS(3)-2020升级版 SVG 缩放矢量图形,即SVG,是W3C...XML分支语言之一,用于标记缩放矢量图形 SVG-菜鸟课程 SVG|MDN SVG图像入门教程|阮一峰老师 D3.js 第一个推荐网站肯定是D3官网,包含很多示例和API文档,都是根据最新版本发布

    19.2K30

    Python奇淫技巧,5个数据可视化工具

    Plotly基于plotly.js,而plotly.js又基于D3.js,因此它是一个高级图表库,与Bokeh一样,Plotly 强项是制作交互式图 ,有超过30种图表类型, 提供了一些在大多数库没有的图表...您可以使用HTML,SVG和CSS将数据变成活灵活现图表。D3并不要求您将自己绑定到任何专有框架,因为现代浏览器拥有D3所需一切,它还用于组合强大可视化组件和数据驱动DOM操作方法。...而且只是D3.js一个python包装器。 R提供D3可视化接口。使用 r2d3 ,您可以将数据从R绑定到D3可视化。...使用 r2d3 创建D3可视化就像RStudio,R Markdown文档和Shiny应用程序R图一样工作。...您可以按如下方式从CRAN 安装 r2d3 软件包: install.packages(“r2d3”) 你可以做一些惊人可视化,例如下面这几个: Sequences Sunburst — Kerry

    4K30
    领券