Как сформировать пузырьковую диаграмму в формате круга в D3JS v5? - PullRequest
Новая
       51

Как сформировать пузырьковую диаграмму в формате круга в D3JS v5?

0 голосов
/ 16 января 2019

Мне нужно создать пузырьковую диаграмму в виде иерархического макета круга.

Но я не могу создать макет с ограниченным кругом для пузырьковой диаграммы.

Я с нетерпением жду, чтобы создать как этот пример . 

var data = [ 
    {data: 4000, value: 0,year: 2009},
    {data: 5000, value: 0,year: 2009},
    {data: 6000, value: 0,year: 2009},
    {data: 2000, value: 0,year: 2009},
    {data: 1000, value: 0,year: 2010},
    {data: 8000, value: 0,year: 2010},
    {data: 8000, value: 0,year: 2010},
    {data: 8000, value: 0,year: 2010},
    {data: 5000, value: 0,year: 2010},
    {data: 2000, value: 0,year: 2010},
    {data: 6000, value: 0,year: 2010},
    {data: 3000, value: 0,year: 2010},
    {data: 7000, value: 0,year: 2010},
    {data: 7000, value: 0,year: 2010},
    {data: 4500, value: 1,year: 2009},
    {data: 9000, value: 1,year: 2009},
    {data: 2000, value: 1,year: 2009},
    {data: 3500, value: 1,year: 2010},
    {data: 2500, value: 1,year: 2010},
    {data: 1500, value: 1,year: 2010},
    {data: 8000, value: 1,year: 2010},
    {data: 8000, value: 1,year: 2010},
    {data: 9000, value: 1,year: 2010},
    {data: 10000,value: 1,year: 2010},
    {data: 3000, value: 1,year: 2010},
    {data: 4000, value: 1,year: 2010},
    {data: 5000, value: 1,year: 2010},
    {data: 5000, value: 1,year: 2010},
    {data: 4000, value: 2,year: 2009},
    {data: 5000, value: 2,year: 2009},
    {data: 6000, value: 2,year: 2009},
    {data: 2000, value: 2,year: 2009},
    {data: 1000, value: 2,year: 2010},
    {data: 5000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 9000, value: 2,year: 2010},
    {data: 5000, value: 3,year: 2009},
    {data: 6000, value: 3,year: 2009},
    {data: 6000, value: 3,year: 2009},
    {data: 1000, value: 3,year: 2009},
    {data: 4000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010},
    {data: 8000, value: 3,year: 2010}
];


d3.select('#content').select('.content1').selectAll('button').on('click', (d, i, nodes) => {
    d3.selectAll('button').classed('active', false);
    var button = d3.select(nodes[i]);
    button.classed('active', true);
    var buttonId = button.attr('id');
    toggleDisplay(buttonId);
});

function toggleDisplay(data) {
    if(data === 'split') {
        splitBubble()
    } else {
        groupBubble()
    }
};

var parentNodePack = data =>
    d3.pack().size([800, 700])(
        d3.hierarchy({ children: data }).sum(d => {
            return d['value'];
        })
    );

var parentPack = parentNodePack(data);

var color  = d3.scaleOrdinal(d3.schemeCategory10);
var xScale = d3.scaleLinear().domain([2009, 2010]).range([200, 600]);
var yScale = d3.scaleLinear().domain([0, 9]).range([200, 500]);

var simulation = d3.forceSimulation()
    .force('collision', d3.forceCollide().radius(function(d) {
        return (d['data']['data'] / 1000 ) * 3;
    }))
    .on('tick', ticked)

var bubble = d3.select('svg').select('g')
    .selectAll('circle')
    .data((parentPack.leaves()));
var bubbleGroup =  bubble.enter()
    .append('circle')
    .style('fill', function(d, i) {
        return color(d['value'].toString());
    })
    .attr('r', function(d) {
        return (d['data']['data'] / 1000) * 2;
    })
    .style('opacity', '0.5');
     
simulation.nodes((parentPack.leaves()));
groupBubble();

function splitBubble() {
    console.log('Inside Split');
    simulation.force('x', d3.forceX().x(function(d, i) {
        return xScale(d['data']['year']);
    })) 
    simulation.alpha(1).restart();
}

function groupBubble() {
    console.log('Inside Group');
    simulation.force('x', d3.forceX().x(function(d) {
        return 400;
    }))
    .force('y', d3.forceY().y(function(d, i) {
        return yScale(d['value']) ;
    }).strength(0.5))
    simulation.alpha(1).restart();
}

function ticked() {
    bubbleGroup
    .attr('cx', function(d,i) {
        return d.x;
    })
    .attr('cy', function(d,i) {
        return d.y;
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="content">
    <div class="content1">
        <button id="group" class="active">Group Item</button>
        <button id="split">Split Item</button>
    </div>
    <br>
    <svg width="800" height="700" style="border: 1px solid steelblue">
        <g ></g>
    </svg>
</div>

Мне нужно сделать кластер (из набора данных - value) без каких-либо столкновений, а также схему силы, ограниченной окружностью.

Может кто-нибудь помочь мне решить эту проблему?

Заранее спасибо.

...