bilevel D3分区/ sunburst布局上的标签 [英] Labels on bilevel D3 partition / sunburst layout

问题描述

我正在尝试向此处显示的bilevel sunburst / partition添加标签 -

在这里，我调用两个路径片段中的两个函数，并且转换在legend的单个变量中处理

I am trying to add labels to the bilevel sunburst / partition shown here - http://bl.ocks.org/mbostock/5944371:

I have added labels to the first 2 levels and rotated them correctly. But I cant now add the new level's labels during a transition. To get started I have put ...

text = text.data(partition.nodes(root).slice(1), function(d) { return d.key; });

straight after the ...

path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });

line but it throws the following error ...

Uncaught TypeError: Cannot read property '__data__' of undefined

What am I doing wrong?

解决方案

I used bilevel partition to add labels via a mouseover, and found that in this version (unlike the other sunburst partition), there are two different sections where "path" is defined and updated. The first is here:

var path = svg.selectAll("path")

and then again below the transition you highlighted in your code: path.enter().append("path")

When i added my mouseover labels, I needed to reference my text function in both places or it wouldn't work after transition.

If you can post your code to JSFiddle or bl.ocks.org we can try to play with it and see, but that was where I got tripped up at first.

Hope that helps.

*NOTE: Comment didn't post: I'm sorry I'm not able to help more, but I'm also a newbie at D3. Here's where I got:

copy and paste your svg.selectAll("text") snippet after the second "path.enter().append("path") snippet. This will cause it to appear on subsequent zooms as well.

Problems I see: there's no "g" element so you need separate transitions for text as well or they all pile up. Also, I can't understand why they're positioned at their original partition spot instead of where the arc exists now.

My approach was add labels on mouseOver. I've uploaded that here: https://github.com/johnnymcnugget/d3-bilevelLabels

In this, I'm calling the two functions in both sets of "path" snippets, and the transitions are handled within the single variable of "legend"

这篇关于bilevel D3分区/ sunburst布局上的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！