Using text as an svg
<clipPath>.
Doesn't work for Internet Explorer.
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script> | |
| var width = 960, | |
| height = 270; | |
| var clipPath = d3.select("body") | |
| .append("svg") | |
| .attr("width", 0) | |
| .attr("height", 0) | |
| .append("defs") | |
| .append("clipPath") | |
| .attr("id", "text") | |
| .append("text") | |
| .attr("y", height - 25) | |
| .attr("textLength", width - 40 + "px") | |
| .attr("lengthAdjust", "spacing") | |
| .attr("font-family", "Arial, Helvetica, sans-serif") | |
| .attr("font-weight", 700) | |
| .attr("font-size", 300 + "px") | |
| .attr("font-style", "italic") | |
| .text("Наклон"); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("clip-path", "url(#text)"); | |
| var x = d3.scale.ordinal().rangeBands([-width/4, width]); | |
| var data = d3.range(0, 1, 0.1); | |
| x.domain(data.map(function(d) { return d; })); | |
| var rect = svg.selectAll("rect") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("x", x) | |
| .attr("y", 0) | |
| .attr("width", x.rangeBand() + 1) | |
| .attr("height", height) | |
| .attr("transform", "skewX(35)"); | |
| var t0 = Date.now(); | |
| setInterval(function() { | |
| var dt = (Date.now() - t0)/4000; | |
| hue = 300*Math.sin(dt); | |
| rect | |
| .style("fill", function(d) { | |
| var h = Math.round(hue * d), | |
| c = Math.round(100*d), | |
| l = Math.round(25 + 50 * d); | |
| return d3.hcl(h, c, l).toString(); | |
| }); | |
| }, 66); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment