8 ms·

I might be missing something, since I just started learning it. But instead of drawing a circle like this sampleSVG.append("svg:circle") .style("st

by jrmoran 15y ago

I might be missing something, since I just started learning it. But instead of drawing a circle like this sampleSVG.append("svg:circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .attr("width", 100) .attr("height", 100); I'd prefer to express it like this sampleSVG.append("svg:circle") .style({ "stroke": "gray", "fill": "white"}) .attr({ "r": 40, "cx": 50, "cy": 50, "width": 100, "height": 100}); That way, I can just pass object literals as arguments to functions such as attr.

oscilloscope 15y ago
Checkout this branch of d3: https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/pull/179 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.

by jrmoran 15y ago

oscilloscope 15y ago

Checkout this branch of d3: https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/commits/map https://github.com/mbostock/d3/pull/179 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.