首页
学习
活动
专区
工具
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中。...可以通过D3对Sunburst Partition可视化探索。...灵活使用Sunburst路径统计图,是我们在路径分析中的一大法宝(动图链接:https://bl.ocks.org/mbostock/4063423)。

2.2K71

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

1.1K10
  • 数据可视化实践之美

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

    1.9K70

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

    随着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.7K60

    基于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.7K20

    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 最后友情帮助阿里打个广告。

    90230

    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.7K50

    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

    第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后门的设计思路,如何绕过层层流量监控以及美国网络安全公司如何将此次攻击事件溯源出来的,敬请期待。

    77620

    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.3K30

    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
    领券