Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Checkout this branch of d3:

https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/pull/179

We're working on this syntax for: style, classed, property, on, attr, attrTween, style, styleTween. It's a more concise syntax, especially when the attrs are functions. An example from the tutorial:

  d3.select(this).selectAll("rect")    
        .data(function(d){return d;})       
        .enter().append("svg:rect")
        .attr("fill", "aliceblue")
        .attr("stroke", "steelblue")
        .attr("stroke-width", "1px")
        .attr("width", function(d, i){return (histoW/dataset[0].length)+"px"})
        .attr("height", function(d, i){return (d/dataMax[rectIdx]*histoH)+"px"})
        .attr("x", function(d, i){return i*(histoW/dataset[0].length)+"px"})
Becomes:

    d3.select(this).selectAll("rect")    
        .data(function(d){return d;})       
        .enter().append("svg:rect")
        .attr(function(d,i ) {
          return {
            "fill": "aliceblue",
            "stroke": "steelblue",
            "stroke-width": "1px",
            "width": (histoW/dataset[0].length)+"px",
            "height": (d/dataMax[rectIdx]*histoH)+"px",
            "x": i*(histoW/dataset[0].length)+"px"
          };
        });
Three anonymous functions become a single function which returns an object.


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: