文字不在d3js中的圓圈中顯示

以下代碼打包d3js中的圓圈。文字不在d3js中的圓圈中顯示

csjson = { 
 
    "children": [{ 
 
    "name": "DirtySprite", 
 
    "count": 8833 
 
    }, { 
 
    "name": "LineSprite", 
 
    "count": 1732 
 
    }] 
 
}; 
 

 
var diameter = 200; 
 
var pack = d3.layout.pack().size([diameter - 4, diameter - 4]).padding(2).sort(function(a, b) { 
 
    return Math.random(); 
 
}).value(function(d) { 
 
    return d.count; 
 
}); 
 

 
var svg = d3.select("body").append("svg").attr("width", diameter).attr("height", diameter); 
 

 
var vis = svg.datum((csjson)).selectAll(".node").data(pack.nodes).enter().append("g"); 
 
var titles = vis.append("title") 
 
    .attr("x", function(d) { 
 
    return d.x; 
 
    }).attr("y", function(d) { 
 
    return d.y; 
 
    }).text(function(d) { 
 
    return d.children ? "" : (d.name + ' ' + d.count); 
 
    }); 
 

 
var circles = vis.append("circle") 
 
    .attr("stroke", "black") 
 
    .style("fill", function(d) { 
 
    return !d.children ? "tan" : "beige"; 
 
    }) 
 
    .attr("cx", function(d) { 
 
    return d.x; 
 
    }) 
 
    .attr("cy", function(d) { 
 
    return d.y; 
 
    }) 
 
    .attr("r", function(d) { 
 
    return d.r; 
 
    }); 
 

 
var textLabels = vis.filter(function(d) { 
 
    return !d.children; 
 
    }).append("text").style("text-anchor", "middle") 
 
    .text(function(d) { 
 
    return d.name.substring(0, d.r/3); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<body> 
 
</body>

圓圈形成正確然而標籤顯示在屏幕的左上角，而不是在圓圈的中心。

var textLabels = vis.filter(function(d) { 
    return !d.children; 
}).append("text").style("text-anchor", "middle") 
    .text(function(d) { 
    return d.name.substring(0, d.r/3); 
});

如何在圓圈中間顯示文本？

來源

2016-09-07 dorado

問題是因爲您沒有將x和y值設置爲文本DOM。

取而代之的是：

var textLabels = vis.filter(function(d) { 
    return !d.children; 
}).append("text").style("text-anchor", "middle") 
    .text(function(d) { 
    return d.name.substring(0, d.r/3); 
});

它必須是

var textLabels = vis.filter(function(d) { 
    return !d.children; 
    }).append("text").style("text-anchor", "middle") .attr("x", function(d) { 
    return d.x; 
    }).attr("y", function(d) { 
    return d.y; 
    }) 
    .text(function(d) { 
    return d.name.substring(0, d.r/3); 
    });

工作撥弄here

來源

2016-09-07 06:37:15 Cyril

謝謝。這個問題現在似乎很愚蠢！ :) – dorado

必須設置x和y位置的文本：

var textLabels = vis.filter(function(d) { 
    return !d.children; 
}).append("text").style("text-anchor", "middle") 
.attr("x", function(d) { 
    return d.x; 
}).attr("y", function(d) { 
    return d.y; 
}).text(function(d) { 
    return d.name.substring(0, d.r/3); 
});

這只是一般原則，您可能需要根據您的需要調整x和y。

來源

2016-09-07 06:39:09

非常感謝！ – dorado

文字不在d3js中的圓圈中顯示

回答

相關問題