Когда я хочу разместить простые объекты, такие как rect или line, следует ли использовать атрибуты transform или x и y?
// this
d3.selectAll('rect')
.attr('x', Number)
.attr('y', 0)
// or this?
d3.selectAll('rect')
.attr("transform", function(d) { return 'translate(' + d + ', 0)' } );
Какова разница в производительности?
В SVG transform не аппаратное ускорение. Они имеют одинаковую производительность для отдельных элементов (по моему опыту). Тем не менее, я использую transform больше для перемещения вещей, потому что в SVG не все элементы имеют атрибуты x или y, рассмотрите...
<line x1="0" y1="0" x2="100" y2="100" />
<circle cx="100" cy="100" r="100" />
<path d="M 0 0 L 100 100" />
<rect x="0" y="0" width="100" height="100" />
Вы должны написать другую реализацию для каждого из этих элементов, если вы не используете transform. Одна область, где transform действительно быстрее, перемещает большое количество элементов, если у вас есть...
<g transform="translate(100, 100)">
<line x1="0" y1="0" x2="100" y2="100" />
<circle cx="100" cy="100" r="100" />
<path d="M 0 0 L 100 100" />
<rect x="0" y="0" width="100" height="100" />
</g>
Он будет менее интенсивным, чем перемещение каждого элемента отдельно