发出标签d3朝阳弧

Question

因此，我已经在我的一个项目中实现了Sunburst，但是，标记每个节点都会给我带来麻烦。代码如下：

var hierarchyGraph; 
function sunburst(targetDOMelement) { 

var sunburstObject = {};
sunburstObject.addCSSClassesToDOMelements = function (selectors, cssClassName, trueFalse) {

    selectors.forEach(s => grp.selectAll(s).classed(cssClassName, trueFalse))
    return sunburstObject; 
}

sunburstObject.loadAndRenderDataset = function (jsonHierarchy) {

    datasetAsJsonD3Hierarchy=jsonHierarchy;
    hierarchyGraph = d3.hierarchy(datasetAsJsonD3Hierarchy);
    addsunburstXYdataAndRender(hierarchyGraph);
    return sunburstObject; 
} 

sunburstObject.loadAndRenderNestDataset = function (nestFormatHierarchy, rootName) {
    layoutAndRenderHierarchyInNestFormat(nestFormatHierarchy, rootName)
    return sunburstObject; 
}   

sunburstObject.loadAndRenderFlatDataset = function (flatDataset, rootName, keys) {
    nestFormatHierarchy=createNestFormatHierarchyFromFlatDataset(flatDataset, keys);
    layoutAndRenderHierarchyInNestFormat(nestFormatHierarchy, rootName)     
    return sunburstObject; 
}

sunburstObject.nodeLabelIfNoKey = function (fn) {
    nodeLabelIfNoKey = fn;
    return sunburstObject; 
}

sunburstObject.appendClickFunction = function (fn) {
    appendClickFunction = fn;
    return sunburstObject; 
}

sunburstObject.getDatasetAsJsonD3Hierarchy = function () {
    return datasetAsJsonD3Hierarchy; 
}

var clickFunction = function (clickedNode,i){

clickedNode.xAtEndPreviousGUPrun = clickedNode.x; 
clickedNode.yAtEndPreviousGUPrun = clickedNode.y;   

calculateXYpositionsAndRender(hierarchyGraph, clickedNode);

appendClickFunction(clickedNode,i );
}

var width = 700,
height = 700,
radius = (Math.min(width, height) / 2) - 10;

var formatNumber = d3.format(",d");

var x = d3.scaleLinear()
    .range([0, 2 * Math.PI]);

var y = d3.scaleSqrt()
    .range([0, radius]);

var color = d3.scaleOrdinal().range(["#f7fcfd", "#e5f5f9", "#ccece6", "#99d8c9", "#66c2a4", "#41ae76", "#238b45", "#006d2c", "#00441b", '#d9d9d9','#bdbdbd','#969696']);

var partition = d3.partition();

var arc = d3.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x0))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x1))); })
.innerRadius(function(d) { return Math.max(0, y(d.y0)); })
.outerRadius(function(d) { return Math.max(0, y(d.y1)); });

var grp = d3.select(targetDOMelement).append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

var nodesGroup = grp
    .append("g")
    .classed("nodesGroup", true);

var linksGroup = grp
    .append("g")
    .classed("linksGroup", true);

var datasetAsJsonD3Hierarchy; 
var node; 
var clickedNode;
var listOfNodes; 


//=================== PRIVATE FUNCTIONS ====================================

var nodeLabelIfNoKey = function(){return "No name set"};
var appendClickFunction = function(){console.log ("No click fn appended")};




var nodeLabel = function(d) {return d.data.name + "(height:"+d.height+")";}

function layoutAndRenderHierarchyInNestFormat (nestFormatHierarchy, rootName){

    datasetAsJsonD3Hierarchy = {"key":rootName, "values": nestFormatHierarchy}
    nodesGroup.append("svg:circle")
    .attr("r", radius)
    .style("opacity", 0)
    function childrenAcessor(d){return d.values} 

    datasetAsJsonD3Hierarchy = {
        key: rootName,
        values: nestFormatHierarchy
    };

    hierarchyGraph = d3.hierarchy(datasetAsJsonD3Hierarchy, childrenAcessor).sum(function(d) {return d.value != undefined ? d.value.length : 0});
    node = hierarchyGraph;
    nodeLabel = function(d) {
        if (key) return d.data.key + "(height:"+ d.height+")";
        else return nodeLabelIfNoKey(d);
    }
    calculateXYpositionsAndRender(hierarchyGraph);
}

function arcTweenData(a, i) {
var oi = d3.interpolate({
    x0: a.x0s ? a.x0s : 0,
    x1: a.x1s ? a.x1s : 0
  },
  a
);

function tween(t) {
  var b = oi(t);
  a.x0s = b.x0;
  a.x1s = b.x1;
  return arc(b);
}
if (i == 0) {
  var xd = d3.interpolate(x.domain(), [node.x0, node.x1]);
  return function(t) {
    x.domain(xd(t));
    return tween(t);
  };
} else {
  return tween;
}
}

function arcTweenZoom(d) {
var xd = d3.interpolate(x.domain(), [d.x0, d.x1]),
  yd = d3.interpolate(y.domain(), [d.y0, 1]), // [d.y0, 1]
  yr = d3.interpolate(y.range(), [d.y0 ? 40 : 0, radius]);
return function(d, i) {
  return i ?
    function(t) {
      return arc(d);
    } :
    function(t) {
      x.domain(xd(t));
      y.domain(yd(t)).range(yr(t));
      return arc(d);
    };
};
}
function calculateXYpositionsAndRender(hierarchyGraph){

    var mysunburstLayoutGenerator = d3.partition();
    var hierarchyGraphWithPositions = 
mysunburstLayoutGenerator(hierarchyGraph);
    listOfNodes = hierarchyGraphWithPositions.descendants(); 
    GUPrenderNodes(listOfNodes);        
}

function GUPrenderNodes(listOfNodes){

    //DATA BIND
    var selection = nodesGroup
        .selectAll("g.cssClassNode") 
        .data(listOfNodes, generateUniqueKey);      

    //ENTER  
    var enterSelection = selection
        .enter()
        .append("path")
        .attr("class", d=>{if(d.data.key) return "nest-key--"+d.data.key.replace(/[\W]+/g,"_"); else return "No key";})
        .attr("fill", d => { while (d.data.height > 1) d = d.parent; return color(d.data.key); })
        .classed("cssClassNode enterSelection", true)
        .attr("d", arc)
        .style("opacity", 1)
        .on("click",click)
        nodesGroup.selectAll("path")
        .transition()
        .duration(2000)
        .attrTween("d", arcTweenData)
        .attr("text");
}

function click(d){
    console.log(d.data.key)
    if(d.height == 0)clickFunction(d);
    console.log(d);
    node = d;
    nodesGroup.selectAll("path")
    .transition()
    .duration(2000)
    .attrTween("d",arcTweenZoom(d));
}

var lastKey=0;
function generateUniqueKey(d) {
    if(!d.hasOwnProperty("key")) d.key = ++lastKey;
    return d.key;
}

function createNestFormatHierarchyFromFlatDataset(flatDataset, keyFunctions){
    function applyKey(keyFunction, i){
        hierarchy = hierarchy.key(keyFunction);
    }       
    var hierarchy = d3.nest();  
    keyFunctions.forEach(applyKey); 
    hierarchy = hierarchy.entries(flatDataset); 
    return hierarchy;
}   
return sunburstObject; 
}   

我遇到的问题是，当我尝试将文本添加到它仍然呈现的节点标签时，但是在任何分区上都没有出现文本。有人可以给我一些如何解决此问题的指导吗？