Принудительное моделирование пузырьков и текстов, идущих без ограничений и несовместимых с осью XY

У меня есть скрипт d3, указанный на этой скрипке: https://jsfiddle.net/ngfoha56/8/

Проблема, с которой я сталкиваюсь, заключается в том, что по мере увеличения количества пузырьков, имеющих одинаковое или подобное значение оси X, количество пузырьков превышает 100 (по оси X) и даже сокращается со сторон или становится неограниченным. Как и в данном примере, G, H, I и J имеют одинаковые значения X и Y, но появляются в разных положениях относительно оси X и Y, а «I» обрезается по бокам. Я хочу, чтобы пузыри соответствовали оси X и оси Y и ограничивали их.

Как я могу это сделать?

я даже пытался сделать

 circles.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
 .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

как указано по этой ссылке: https://bl.ocks.org/mbostock/1129492

чтобы пузырьки оставались в пределах указанной высоты и ширины, но это не сработало.


javascript d3.js bubble-chart force-layout
person Yesha    schedule 04.11.2017    source источник
comment
Я уже говорил вам дважды (в ваших последних вопросах, здесь и здесь), это в последний раз: почему вы используете силу с кругами? Если это точечная диаграмма, точное положение кругов очень важно. Вы должны использовать силу с только текстами, а не с кругами.   -  person Gerardo Furtado    schedule 04.11.2017
comment
Если я применю силу только к текстам, круги будут перекрываться, как в этой скрипке, которую вы предоставили: jsfiddle.net/ 02heuL98 Я хочу, чтобы и круги, и тексты не перекрывались, были ограничены и соответствовали оси XY   -  person Yesha    schedule 04.11.2017
comment
Итак, это не точечная диаграмма, и вы просто врете с данными. Я настоятельно рекомендую вам не делать этого. Если круги перекрываются, выберите другое представление данных: гистограмму, диаграмму наклона и т. д. Но не используйте диаграмму направленной силы с осями: это просто нет смысла.   -  person Gerardo Furtado    schedule 04.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что большинство точек близки к 100, поэтому центр круга будет близок к 100, поэтому круг будет лежать.

Одним из способов может быть установка порога 90%, что означает, что точки за пределами 90% будут сделаны 90% от их значения, поэтому на дисплее он будет отображаться на 90% от его текущего значения, таким образом, точка не погаснет. шкалы.

    var percent =0.90;//changeit as per your conveninece
    simulation = d3.forceSimulation()
    .force("x", d3.forceX(function(d) {
    var k = parseInt((xscale(+d.student_percentile)/width)*100);
    if (k > percent*100){//if less than percent
        return xscale(+d.student_percentile * percent)//reduce the percentile
    }
        return xscale(+d.student_percentile);
    }))
    .force("y", d3.forceY(function(d) {
    var k = parseInt((yscale(+d.rank)/height)*100);
    if (k > percent*100){
        return yscale(+d.rank * percent)
    }

        return yscale(+d.rank);
    }))
    .force("collide", d3.forceCollide(20));

рабочий код здесь

person Cyril Cherian    schedule 04.11.2017
comment
Спасибо за ваше решение. Пузырьки теперь ограничены, но они все еще несовместимы относительно оси XY. Например, «H» появляется где-то около 80 (по оси X), но должно быть между 90-100 (имеет ось X 95,19, увеличено), но «I» с такими же параметрами появляется почти в правильном месте. - person Yesha; 04.11.2017
comment
да, проблема в том, что, поскольку это круг, когда вы делаете его ограниченным. Если ваш круг указывает точку на x, которая близка к максимальному значению, оно будет выглядеть так, как будто оно больше максимального значения. Это из-за его радиуса - person Cyril Cherian; 04.11.2017