以下标记
<svg width="600" height="600">
<circle transform="translate(317.8581009736753,323.9901806141865)" r="73.6331818615997" count="898" class="akitl"></circle>
<circle transform="translate(481.05391544886606,323.9901806141865)" r="86.59567410679216" count="1242" class="alqvi"></circle>
<circle transform="translate(198.67990796112048,199.24570883559022)" r="95.92413308046638" count="1524" class="atpad"></circle>
<circle transform="translate(385.69652841580853,171.66481505594308)" r="90.14838055539863" count="1346" class="dlkqv"></circle>
<circle transform="translate(145.86001402953752,404.9739619142598)" r="113.50960358519578" count="2134" class="yalea"></circle>
</svg>
是由于以下Javascript函数导致的
<script type="text/javascript">
(function() {
//JSON data
var json = {"nullomers": {
"AKITL": 898,
"ALQVI": 1242,
"ATPAD": 1524,
"DLKQV": 1346,
"YALEA": 2134
}};
// D3 Bubble Chart
var diameter = 600;
var svg = d3.select('#graph').append('svg')
.attr('width', diameter)
.attr('height', diameter);
var bubble = d3.layout.pack()
.size([diameter, diameter])
.value(function(d) {return d.size;})
.padding(3);
// generate data with calculated layout values
var nodes = bubble.nodes(processData(json))
.filter(function(d) { return !d.children; });
//console.log(nodes);
var vis = svg.selectAll('circle')
.data(nodes);
vis.enter().append('circle')
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
.attr('r', function (d) { return d.r; })
.attr('count', function (d) { return d.size; })
.attr('class', function (d) { return d.className; });
function processData(data) {
var obj = data.nullomers;
var newDataSet = [];
for(var prop in obj) {
newDataSet.push({ name: prop, className: prop.toLowerCase(), size: obj[prop] });
}
return {children: newDataSet};
}
})();
</script>
我想将class
和count
属性中的文本添加到圆中作为标签-最好与每个圆的中心对齐。
另外,我希望所有标签都是链接。
有可能这样做吗?
上面的代码只是this示例中的一部分。