Question

js和我正在试图弄清楚如何在SVG元素中绘制离散数量的矩形。它可以是5个矩形到一百万个。最好的方法是什么？我应该使用序数量表，因为我有一个离散数量的矩形或者我应该使用线性标度？所以我认为随着矩形数量的增加，矩形的宽度会缩小。

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/

使用D3.js在svg元素中绘制离散数量的rects

1 个答案: