Принудительное столкновение для положения y на пузырьковой диаграмме - PullRequest
Новая
       47

Принудительное столкновение для положения y на пузырьковой диаграмме

1 голос
/ 01 октября 2019

Я использую попытку использовать d3.forceSimulation, который применяет силу к позиции y кругов диаграммы, чтобы не допустить их перекрытия.

окончательный график будет выглядеть примерно так - enter image description here

Я следовал некоторым примерам, но не могу правильно настроить координаты y. К сожалению, я понятия не имею, где это идет не так. Любая подсказка в правильном направлении будет принята с благодарностью!

Пока это мой код: 

    //ADDING SKELETON FOR THE CHART//
    let width = 900;
    let height = 300;
    let margin = {x: 50, y:20};

    let chartDiv = d3.select('body').append('div').attr('id', 'bubble-chart');
    let svg = chartDiv.append('svg');
    svg.attr('height', height).attr('width', width + margin.x);

    //SCALES FOR X POSITION//
    let posScale = d3.scaleLinear().domain([(0-overallMax), overallMax]);
    posScale.range([0, width]);

    //SCALES FOR COLOR//
    let colorScale = d3.scaleOrdinal().domain(groupData.map(g=> g[0])).range(d3.schemeSet3);

    //SCALE FOR CIRCLE SIZE//
    let circleScale = d3.scaleLinear().domain([d3.min(data.map(d=> +d.total)), d3.max(data.map(d=> +d.total))])
    .range([3, 10]);

    //SIMULATION PART
    let simulation = d3.forceSimulation().nodes(data)
        .force('center', d=> d3.forceCenter(posScale(d.position), height/2))
        //.force('charge', d3.forceManyBody().strength(.1))
        .force('collision', d3.forceCollide().radius( d => circleScale(+d.total)))
        .on('tick',ticked)

    let circleGroup = svg.append('g').attr('transform', `translate(${margin.x / 2})`);

    let circles = circleGroup.selectAll('circle').data(data).join('circle');
    circles.attr('r', (d)=> circleScale(+d.total))//.attr('cx', (d) => posScale(d.position)).attr('cy', 50);
    .attr("cx", d=> posScale(d.position))
    .attr("cy", height / 2)
    circles.attr('fill', (d)=> colorScale(d.category));
    circles.style('opacity', '0.5');

    // Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
    function ticked(){
     circles.attr("cy", d=> d.y).attr('cx', d=> posScale(d.position));

   }

Вот так выглядит мой график с приведенным выше кодом: enter image description here

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

1 Ответ

1 голос
/ 01 октября 2019

Это не то, как каждый создает диаграмму теплых пчел (техническое название этого вида визуализации данных). Вы должны использовать forceX и forceY в симуляции, чтобы установить позиции. В вашем случае: 

let simulation = d3.forceSimulation().nodes(data)
    .force("x", d3.forceX(function(d) { 
        return posScale(d.position); 
    }).strength(foo))
    .force("y", d3.forceY(50).strength(bar))
    .force('collision', d3.forceCollide().radius( d => circleScale(d.total)))
    .on('tick',ticked)

Затем настройте силу (foo и bar) в соответствии с вашими потребностями и измените функцию ticked, чтобы использовать свойства x и yпредоставлено моделированием.

...