d3 - 森伯斯特分区。每个节点的大小不同

Question

我是d3库和javascript的新手。 我试图实现类似的目标 this，我有一个旭日分区，但每个节点相对于径向中心的高度不同 - 但其父/子的填充保持不变。 我试过环顾四周，无法想出任何解决方案。 （尝试更改innerRadius / outerRadius参数似乎不起作用:(）。

这是我的代码：

var vis = d3.select("#chart").append("svg")
    .style("margin", "auto")
    .style("position", "relative")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g")
    .attr("id", "container")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var partition = d3.layout.partition()
    .sort(function (a, b) { return d3.ascending(a.time, b.time); })
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return d.n_leaves+1; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

//read data from json file and visualize it
d3.text("5rrasx_out.json", function(text) {
    var data = JSON.parse(text);
    var json = buildHierarchy(data,'5rrasx');

    createVisualization(json);
});

// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {

    // Bounding circle underneath the sunburst, to make it easier to detect
    // when the mouse leaves the parent g.
    vis.append("svg:circle")
        .attr("r", radius)
        .style("opacity", 0);

    // For efficiency, filter nodes to keep only those large enough to see.
    var nodes = partition.nodes(json);
    var dataSummary = [{label: 'pos', count: totalPos}, {label: 'neg', count: totalNeg}];

    //set title
    $("#title").text(json.title.replace(/\[.*\]/g,""));

    //set chart
    var path = vis.data([json]).selectAll("path")
        .data(nodes)
        .enter().append("path")
        .attr("class", "sunburst_node")
        .attr("display", function(d) { return d.depth ? null : "none"; })
        .attr("d", arc)
        .attr("fill-rule", "evenodd")
        .style("fill", function(d) { return (d.sentiment > 0) ? colors["pos"] : colors["neg"]; })
        .style("opacity", 1)
        .on("mouseover", mouseover)
        .on("click", click);
};

非常感谢任何帮助。 谢谢！

Answer 1

我知道这不是上述问题的正确答案，但如果有人需要每个节点有不同尺寸的旭日形态，我在这里发布如何使用ggsunburst包在R中进行。

# install ggsunburst
if (!require("ggplot2")) install.packages("ggplot2")
if (!require("rPython")) install.packages("rPython")
install.packages("http://genome.crg.es/~didac/ggsunburst/ggsunburst_0.0.10.tar.gz", repos=NULL, type="source")
library(ggsunburst)

# one possible input for ggsunburst is newick format
# consider the following newick "(((A,B),C),D,E);"
# you can define the distance in node A with "A:0.5"
# you can define size in node E with "E[&&NHX:size=5]"
# adding both attributes to the newick
nw <- '(((A:0.5,B),C:3),D[&&NHX:size=5],E[&&NHX:size=5]);'
sb <- sunburst_data(nw)
sunburst(sb, rects.fill.aes = "name") + scale_fill_discrete(guide=F)

正如您在代码中看到的，这些属性可以独立定义，正如您在图中看到的那样，它们会影响相应节点的维数：

节点＆＃34; A＆＃34;比＆＃34; B＆＃34;短0.5倍，由属性＆＃34;距离＆＃34;

定义

E的角度比C宽5倍，由属性＆＃34; size＆＃34;定义。

这里尝试类似于使用newick树在问题中发布的示例

nw <- "(((.:0[&&NHX:support=1.0:dist=0.0:name=.:size=3],a3:1[&&NHX:color=2:support=1.0:dist=1.0:name=a3:size=1])1:1[&&NHX:color=-3:support=1.0:dist=1.0:name=a2])1:1[&&NHX:color=-1:support=1.0:dist=1.0:name=a1],b1:1.8[&&NHX:color=1:support=1.0:dist=1.8:name=b1:size=5],(((a4:1[&&NHX:color=1:support=1.0:dist=1.0:name=a4:size=1],b4:1.8[&&NHX:color=-1:support=1.0:dist=1.8:name=b4:size=1],c4:1.5[&&NHX:color=2:support=1.0:dist=1.5:name=c4:size=1],d4:0.8[&&NHX:color=-2:support=1.0:dist=0.8:name=d4:size=1])1:1[&&NHX:color=1:support=1.0:dist=1.0:name=b3:size=1])1:1[&&NHX:color=-3:support=1.0:dist=1.0:name=b2:size=1],(c3:1[&&NHX:color=1:support=1.0:dist=1.0:name=c3:size=1],(e4:1[&&NHX:color=-2:support=1.0:dist=1.0:name=e4:size=1])1:0.5[&&NHX:color=-1:support=1.0:dist=0.5:name=d3:size=1])1:0.5[&&NHX:color=1:support=1.0:dist=0.5:name=c2:size=1])1:1[&&NHX:color=-1:support=1.0:dist=1.0:name=c1:size=1],d1:0.8[&&NHX:color=3:support=1.0:dist=0.8:name=d1:size=20]);"
sb <- sunburst_data(nw, node_attributes = "color")
sunburst(sb, leaf_labels.size = 4, node_labels.size = 4, node_labels = T, node_labels.min = 1, rects.fill.aes = "color") + 
  scale_fill_gradient2(guide=F) + ylim(-8,NA)