2013-02-06 41 views

回答

3

通過數據使用的SVG元素,循環,以及用於每個數據繪製圓圈和附加文本字段。 這是建立從基地:

var data = [{ 
    label: 'Datum 1', 
    rVal: 1, 
    yVal: 1, 
    xVal: 1, 
     'class': 'red' 
}, { 
    label: 'Datum 2', 
    rVal: 2, 
    yVal: 1, 
    xVal: 2, 
     'class': 'green' 
}, { 
    label: 'Datum 3', 
    rVal: 3, 
    yVal: 1, 
    xVal: 3, 
     'class': 'blue' 
}], 

    // Preliminaries 
    // domain is the data domain to show 
    // range is the range the values are mapped to 
    svgElm = d3.select('svg'), 
    rscale = d3.scale.linear().domain([0, 5]) 
     .range([0, 60]), 
    xscale = d3.scale.linear().domain([0, 5]) 
     .range([0, 320]), 
    yscale = d3.scale.linear().domain([0, 5]) 
     .range([240, 0]), 
    circles; 

// Circles now easily reusable 
circles = svgElm.select('g.data-group') 
    .selectAll('circle') 
    .data(data) 
    .enter() 
    .append('circle'); 

// Alter circles 
circles.attr('class', function (d) { 
    return d['class']; 
}) 
    .attr('r', function (d) { 
    return rscale(d.rVal); 
}) 
    .attr('cx', function (d) { 
    return xscale(d.xVal); 
}) 
    .attr('cy', function (d) { 
    return yscale(d.yVal); 
}); 

查看的jsfiddle完整的例子: http://jsfiddle.net/elydelacruz/XW8sE/13/

+0

但有可能使社會各界能夠在底部同樣對齊。並且第一個圓可以觸及第二個圓,第二個圓可以觸摸第三個圓? –

+0

請參閱此更新:http://jsfiddle.net/XW8sE/17/ –

+0

謝謝Dimitar。 – elydelacruz