使用Javascript / CSS在中间绘制带有文字的圆圈

时间:2018-08-08 14:48:37

标签: javascript css css3 d3.js bubble-chart

以下标记

<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>

最后生成所描绘的球形物体 enter image description here

我想将classcount属性中的文本添加到圆中作为标签-最好与每个圆的中心对齐。 另外,我希望所有标签都是链接。

有可能这样做吗?

上面的代码只是this示例中的一部分。

0 个答案:

没有答案