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

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

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

计算圆的总和diameters using the Numbers` 数组(它是总和的两倍；参见 this )。将结果称为totalDiams。

现在定义xCenterScale喜欢

var xCenterScale = d3.scale.ordinal()
    .domain(d3.range(numbers.length)) 
    .range([numbers[0], totalDiams - numbers[numbers.length - 1]); 

现在你的圆心 i是 xScale(xCenterScale(i)) .