Рисование дискретного числа прямых в элементе svg. Использование D3.js

js, и я пытаюсь выяснить, как рисовать дискретное число прямоугольников в элементе SVG. Это может быть 5 прямоугольников до миллиона. Каков наилучший способ сделать это? Должен ли я использовать шкалу Ординала, поскольку у меня есть дискретное число прямоугольников или я должен использовать линейную шкалу? Поэтому я думаю, что ширина прямоугольников должна уменьшаться по мере увеличения числа прямоугольников.Рисование дискретного числа прямых в элементе svg. Использование D3.js

источник

2013-05-21 ltsimpso

Хотите разместить прямоугольники рядом друг с другом? На вершине друг друга? Нанесение миллиона прямоугольников будет слишком медленным, вы можете увеличить до нескольких тысяч. –

рядом друг с другом, прежде чем я использовал ширину/(d3.range (количество прямых) .length) + xmargin для атрибута width и используя ту же самую вещь для позиции значения x, но я использую 1 2 3 4 5 ... чтобы переместить его, чтобы он не перекрывался. Я пытался выяснить, как это сделать с масштабами, но не удалось. – ltsimpso

Вы пробовали иметь только линейную шкалу с индексами в качестве входного домена и x начальных позиций вывода? –

Вам необходимо вычислить макет и создать соответствующие шкалы. Например:

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/

источник

2013-05-23 18:24:54

Спасибо, был бы хороший способ сделать это, если бы мне нужна квадратная матрица? – ltsimpso

Рисование дискретного числа прямых в элементе svg. Использование D3.js

ответ

Смежные вопросы