svg - 在 svg 元素中绘制离散数量的矩形。使用 D3.js

Question

js，我试图弄清楚如何在 SVG 元素中绘制离散数量的矩形。它可能是 5 个矩形到 100 万个。解决此问题的最佳方法是什么？由于我有离散数量的矩形，我应该使用序数比例还是应该使用线性比例？所以我认为矩形的宽度应该随着矩形数量的增加而缩小。

Answer 1

您必须计算布局并创建适当的比例。例如：

var width = 300,
    height = 20,
    margin = 2,
    nRect = 20,
    rectWidth = (width - (nRect - 1) * margin) / nRect,
    svg = d3.select('#chart').append('svg')
       .attr('width', width)
       .attr('height', height);

var data = d3.range(nRect),
    posScale = d3.scale.linear()
        .domain(d3.extent(data))
        .range([0, width - rectWidth]);

svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', posScale)
    .attr('width', rectWidth)
    .attr('height', height);

我用这段代码写了一个小jsfiddle：http: //jsfiddle.net/pnavarrc/CA7rY/