This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.
Note: The second point is not recommended practice but serves to ilustrate the variable wrap feature!
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| canvas { | |
| border: 1px solid rgba(0,0,0,0.5); | |
| } | |
| #results, #container { |
| license: gpl-3.0 | |
| height: 600 |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>http://stackoverflow.com/questions/32510101/d3-why-is-enter-selection-not-showing-any-transition-for-a-donut-chart?noredirect=1#comment52896340_32510101</title> | |
| <style> | |
| .chart text { | |
| font: 16px sans-serif; | |
| } |
| dispatch.data([{"12":0.461,"id":1001,"04":0.52,"08":0.478,"x":-86.641,"y":32.539},{"12":0.558,"id":1003,"04":0.539,"08":0.514,"x":-87.725,"y":30.743},{"12":-0.029,"id":1005,"04":0.099,"08":0.015,"x":-85.392,"y":31.877},{"12":0.468,"id":1007,"04":0.445,"08":0.458,"x":-87.128,"y":33},{"12":0.741,"id":1009,"04":0.625,"08":0.695,"x":-86.567,"y":33.983},{"12":-0.528,"id":1011,"04":-0.364,"08":-0.484,"x":-85.716,"y":32.106},{"12":0.075,"id":1013,"04":0.186,"08":0.134,"x":-86.685,"y":31.758},{"12":0.32,"id":1015,"04":0.326,"08":0.325,"x":-85.825,"y":33.776},{"12":0.051,"id":1017,"04":0.175,"08":0.085,"x":-85.39,"y":32.92},{"12":0.55,"id":1019,"04":0.319,"08":0.512,"x":-85.6,"y":34.176},{"12":0.603,"id":1021,"04":0.542,"08":0.578,"x":-86.718,"y":32.855},{"12":0.046,"id":1023,"04":0.082,"08":0.074,"x":-88.263,"y":32.023},{"12":0.083,"id":1025,"04":0.185,"08":0.116,"x":-87.827,"y":31.685},{"12":0.457,"id":1027,"04":0.415,"08":0.473,"x":-85.862,"y":33.275},{"12":0.682,"id":1029,"04":0.514,"08":0.624,"x":-85.52,"y":33.67 |
| {"head":{"functionName":"(root)","scriptId":"0","url":"","lineNumber":0,"columnNumber":0,"hitCount":0,"callUID":370,"children":[{"functionName":"(program)","scriptId":"0","url":"","lineNumber":0,"columnNumber":0,"hitCount":1512,"callUID":1,"children":[],"positionTicks":[],"deoptReason":"","id":2},{"functionName":"(idle)","scriptId":"0","url":"","lineNumber":0,"columnNumber":0,"hitCount":14357,"callUID":2,"children":[],"positionTicks":[],"deoptReason":"","id":3},{"functionName":"_tick","scriptId":"628","url":"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js","lineNumber":19937,"columnNumber":32,"hitCount":1,"callUID":9,"children":[{"functionName":"update","scriptId":"628","url":"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js","lineNumber":20234,"columnNumber":42,"hitCount":1,"callUID":7,"children":[{"functionName":"emit","scriptId":"628","url":"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js","lineNumber":3583,"columnNumber":44,"hitCount":0,"callUID":6,"children":[{"funct |
| # Created by .ignore support plugin (hsz.mobi) | |
| ### Example user template template | |
| ### Example user template | |
| # IntelliJ project files | |
| .idea | |
| *.iml | |
| out | |
| gen | |
| .gitignore |
| # Created by .ignore support plugin (hsz.mobi) | |
| ### JetBrains template | |
| # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm | |
| # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 | |
| # User-specific stuff: | |
| .idea/workspace.xml | |
| .idea/tasks.xml | |
| # Sensitive or high-churn files: |
| /** | |
| * Created by cool.blue on 29-Aug-16. | |
| */ | |
| var load = (function () { | |
| var messageDispatcher, weinre; | |
| function toggleElement(context, n) { | |
| function arrayicate(x) { |
| # Created by .ignore support plugin (hsz.mobi) | |
| ### Example user template template | |
| ### Example user template | |
| # IntelliJ project files | |
| .idea | |
| *.iml | |
| out | |
| gen |