D3.js - Compare .attr('position') & .attr('transform', 'translate')

JavaScript performance comparison

Revision 7 of this test case created

Info

.attr("transform", "translate(" + p + "," + p + ")");

Preparation code

<script src="//d3js.org/d3.v2.js"></script>

<div id='svg'>
</div>

<script>

var data = [{"x":626.7029359941371,"y":456.3320756065659,"numberOfRooms":"rooms6"},{"x":628.5815378669649,"y":442.474275740562,"numberOfRooms":"rooms6"},{"x":625.0256559313275,"y":485.0980498122517,"numberOfRooms":"rooms4"},{"x":673.5713672447018,"y":435.44143285625614,"numberOfRooms":"rooms6"},{"x":620.9197796317749,"y":544.0238666362129,"numberOfRooms":"rooms5"},{"x":634.3727905903943,"y":427.33705822099,"numberOfRooms":"rooms5"},{"x":621.6709099579602,"y":421.76218859292567,"numberOfRooms":"rooms5"},{"x":577.8496292317286,"y":435.5550680756569,"numberOfRooms":"rooms3"},{"x":630.7343820454553,"y":475.72672948171385,"numberOfRooms":"rooms6"},{"x":648.6136114438996,"y":437.38907659542747,"numberOfRooms":"rooms5"},{"x":607.5898861321621,"y":466.24702911055647,"numberOfRooms":"rooms3"},{"x":617.8510159971192,"y":490.73351148772053,"numberOfRooms":"rooms5"},{"x":597.1550487922505,"y":450.33014068822376,"numberOfRooms":"rooms5"},{"x":580.2589413956739,"y":432.36200874345377,"numberOfRooms":"rooms5"},{"x":645.5666026156396,"y":431.519174488727,"numberOfRooms":"rooms6"},{"x":630.5239605018869,"y":452.503799384227,"numberOfRooms":"rooms6"},{"x":635.5886367456988,"y":468.18110182275996,"numberOfRooms":"rooms6"},{"x":611.337320887018,"y":528.8959303463344,"numberOfRooms":"rooms4"},{"x":620.9787875385955,"y":415.2201244670432,"numberOfRooms":"rooms6"},{"x":630.8251498802565,"y":485.00847390154377,"numberOfRooms":"rooms5"},{"x":558.3954019220546,"y":444.6488168197684,"numberOfRooms":"rooms5"},{"x":608.1707396125421,"y":402.6029961137101,"numberOfRooms":"rooms4"},{"x":661.6953424895182,"y":448.59298684215173,"numberOfRooms":"rooms3"},{"x":641.1205089399591,"y":448.2305557364598,"numberOfRooms":"rooms4"},{"x":628.5046636108309,"y":499.15387883922085,"numberOfRooms":"rooms6"},{"x":649.093386690598,"y":432.13582782424055,"numberOfRooms":"rooms6"},{"x":577.0476275510155,"y":429.5683559360914,"numberOfRooms":"rooms4"},{"x":632.1318868203089,"y":455.37955914484337,"numberOfRooms":"rooms6"},{"x":621.5167726762593,"y":441.03351640095934,"numberOfRooms":"rooms6"},{"x":671.7764500165358,"y":454.84009933145717,"numberOfRooms":"rooms2"},{"x":616.856720042415,"y":470.3311268116813,"numberOfRooms":"rooms3"},{"x":647.7383883614093,"y":417.5981880654581,"numberOfRooms":"rooms3"},{"x":666.0588668123819,"y":433.11264119227417,"numberOfRooms":"rooms5"},{"x":623.8610232546926,"y":433.42186076776125,"numberOfRooms":"rooms3"},{"x":563.5385179435834,"y":447.2861406279262,"numberOfRooms":"rooms5"},{"x":614.1777458470315,"y":495.58362907823175,"numberOfRooms":"rooms5"},{"x":629.4733978873119,"y":442.69001940917224,"numberOfRooms":"rooms6"},{"x":627.1038377792574,"y":498.75018436531536,"numberOfRooms":"rooms5"},{"x":628.8623059662059,"y":526.0731622132007,"numberOfRooms":"rooms4"},{"x":611.4675570041873,"y":445.8442348164972,"numberOfRooms":"rooms5"},{"x":624.9816920403391,"y":405.99555732193403,"numberOfRooms":"rooms6"},{"x":588.5339148514904,"y":405.5231645531021,"numberOfRooms":"rooms6"},{"x":608.7501398134045,"y":543.4236307758838,"numberOfRooms":"rooms6"},{"x":621.7454709303565,"y":425.3865681705065,"numberOfRooms":"rooms2"},{"x":563.0367452176288,"y":448.39360147179104,"numberOfRooms":"rooms3"},{"x":616.9588531344198,"y":463.96668528486043,"numberOfRooms":"rooms5"},{"x":580.306594078429,"y":435.3636827149894,"numberOfRooms":"rooms4"},{"x":660.4394242153503,"y":427.507810032228,"numberOfRooms":"rooms4"},{"x":649.9127305038273,"y":441.14735807222314,"numberOfRooms":"rooms5"},{"x":585.3726549246348,"y":436.265216518892,"numberOfRooms":"rooms4"},{"x":651.9982615374029,"y":445.97285165754147,"numberOfRooms":"rooms3"},{"x":602.3171055596322,"y":435.26557279890403,"numberOfRooms":"rooms6"},{"x":635.7872751606628,"y":493.4397502762731,"numberOfRooms":"rooms3"},{"x":604.0639199633151,"y":469.5033542676829,"numberOfRooms":"rooms2"},{"x":637.9236416113563,"y":449.268649199279,"numberOfRooms":"rooms4"},{"x":613.3431011755019,"y":460.4504759076517,"numberOfRooms":"rooms5"},{"x":627.9295949093066,"y":450.0010919452179,"numberOfRooms":"rooms6"},{"x":651.2488878611475,"y":449.95029308157973,"numberOfRooms":"rooms4"},{"x":621.0390157331713,"y":477.66065707523376,"numberOfRooms":"rooms5"},{"x":621.5303842122667,"y":465.7166339440737,"numberOfRooms":"rooms5"},{"x":627.8275026832707,"y":466.7118999741506,"numberOfRooms":"rooms5"},{"x":627.4483529762365,"y":494.9748911454808,"numberOfRooms":"rooms3"},{"x":667.3651671935804,"y":452.8040147561114,"numberOfRooms":"rooms6"},{"x":622.5803500604816,"y":524.4794874833897,"numberOfRooms":"rooms6"},{"x":667.5056463526562,"y":435.71444963268004,"numberOfRooms":"rooms6"},{"x":627.1742987185717,"y":438.01789628434926,"numberOfRooms":"rooms4"},{"x":610.898791489657,"y":527.1477186961565,"numberOfRooms":"rooms4"},{"x":649.0431582196616,"y":445.4308161244262,"numberOfRooms":"rooms6"},{"x":663.6661342037842,"y":441.42040691850707,"numberOfRooms":"rooms5"},{"x":596.7744237738661,"y":439.0620498554781,"numberOfRooms":"rooms2"}];

var svg = d3.select("#svg").append("svg").append("g");

</script>
 

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
.attr('position')
svg.selectAll("circle").data(data)
  .enter().append("circle")
  .style("fill", "red")
  .style("fill-opacity", 0.8)
  .style("stroke-width", 0)
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
pending…
.attr('transform')
svg.selectAll("circle").data(data)
  .enter().append("circle")
  .style("fill", "red")
  .style("fill-opacity", 0.8)
  .style("stroke-width", 0)
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.Y + ")";
  });
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment