Question

我有兴趣了解如何使用d3.js通过使用d3的缩放函数之一来均匀分布不同大小的svg圆圈。现在，我有代码创建圈子;我正在使用d3.scale.ordinal（）作为我的x刻度，并且圆圈在数值上均匀分布（从一个圆的中心到另一个圆的中心），但不是视觉上的。我正在慢慢地教自己JavaScript，并感谢你提供的任何帮助。

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    w = 700 -  margin.left - margin.right,
    h = 200 - margin.top - margin.bottom;


var numbers = [86, 57, 112, 293, 75, 1, 45];


var xScale = d3.scale.ordinal()
    .domain(d3.range(numbers.length)) 
    .rangeRoundBands([0, w], .8); 


var rScale = d3.scale.sqrt()
    .domain([0, d3.max(numbers)])
    .range([10, 60]);      

var svg = d3.select("body")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom); 

svg.selectAll("circle")
     .data(numbers)
    .enter().append("circle")
     .attr("cy", h/2)
     .attr("cx", function(d,i) { return xScale(i); })
     .attr("r", function(d) { return rScale(d); })
     .style("fill", "#ccc");


svg.selectAll("text")
    .data(numbers)
    .enter().append("text")
    .text(function(d){ return d; })
    .attr("y", h/2 + 5 )
    .attr("x", function(d,i){ return xScale(i); })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("text-anchor", "middle")
    .style("fill", "#000000");

Answer 1

我认为为圆心定义另一个比例会更优雅 - 这样，你可以将它用于圆圈和文本。请注意，这不会取代您的AmountPaid，而是会显示在它之前。

计算圆圈xScale数字数组的总和（它是总和的两倍;请参阅this）。调用结果totalDiams。

现在定义diameters using the，如

xCenterScale

现在，您的圈子var xCenterScale = d3.scale.ordinal() .domain(d3.range(numbers.length)) .range([numbers[0], totalDiams - numbers[numbers.length - 1]);中心位于i。

Answer 2

高度的解决方案（宽度应该相同）：

找出所需的总高度并除以 2，然后找出元素（和间隙）的总高度并将其除以 2。然后先用第二个值减去，例如：

    function [sys,x0,str,ts] = sfcn(t,x,u,flag)
%{
Despacha a bandeira. A função de troca controla as chamadas para
rotinas da S-Function em cada estágio de simulação. 
%}
A = [-72 -8100;1 0];
B = [1;0];
C = [0 2.4e8];
D = 0;
switch flag,
case 0
    [sys,x0,str,ts] = mdlInitializeSizes(A,B,C,D); % Inicialização
case 1,
%Calcula as derivadas do estado de variáveis contínuas    
    sys=mdlDerivatives(t,x,u,A,B) 
case 3
    sys = mdlOutputs(t,x,u,C,D); % Calculo das saídas 
case {2, 4, 9 }          % Sinalizações não usadas
                         % 2:discrete
                         % 4:calctimeHit
                         % 9:termination
    sys = []; 
otherwise
    error(['Unhandled flag = ',num2str(flag)]); % Error handling
end;

function [sys,x0,str,ts]=mdlInitializeSizes(A,B,C,D)
str=[];                    % Sem ordenação de estado
ts = [0 0];                   % Tempo de amostra herdado
s = simsizes;
    s.NumContStates=    length(A);  % Número de estados continuos
    s.NumDiscStates=    0;  % Número de estados discretos
    s.NumOutputs=       1;  % Número de saídas 
    s.NumInputs=        1;  % Número de entradas
    s.DirFeedthrough=   0;  % Sinalizar para feedthrough direto
    s.NumSampleTimes=   1;  % Número de amostras de tempo
sys = simsizes(s);
x0 = [0 0];

function sys=mdlDerivatives(t,x,u,A,B)
sys = A*x + B*u;

function sys=mdlOutputs(t,x,u,C,D)
sys = C*x + D*u;

请注意，间隙数等于元素数减 1。

我可以使用d3.scales均匀分布不同大小的圆圈

2 个答案: