API 案例 d3.scaleOrdinal() https://bl.ocks.org/lhstock/8394a9bef240321c34f3c13576d50ee5
Last active
July 31, 2019 07:32
-
-
Save lhstock/8394a9bef240321c34f3c13576d50ee5 to your computer and use it in GitHub Desktop.
scalePoint()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| <script> | |
| var width = 500,height = 500,padding = {left:20,right:20}; | |
| var data = ["tang","song","yuan","ming","qing"]; | |
| var axis_length = width - padding.left - padding.right; | |
| //d3.scaleImplicit = 200; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width",width) | |
| .attr("height",height) | |
| var scale = d3.scalePoint() | |
| .domain(data) | |
| // .range([0,axis_length-2]) | |
| // .round(true) | |
| .rangeRound([0,axis_length]) | |
| .padding(.1) | |
| .align(0.1); | |
| var axis = d3.axisBottom() | |
| .scale(scale) | |
| .ticks(5) | |
| svg.append("g").call(axis).attr("transform","translate("+ (padding.left) +","+(height - 100)+")"); | |
| </script> | |
| </html> |
i'm sorry. this's an error. "ticks " does not apply to d3.scalePoint().
You can assign data to control the quantity
var scale = d3.scalePoint() .domain(data)
or
Maybe you should choose the right scale type
Hello,
Thank you so much for responding quickly, I really need help, actually I am
plotting line chart using scale point and my requirement is to restrict
number of ticks to reduce congestion on xaxis labels(if xaxis labels are
long),
It would really kind of you, if you can suggest any solution to detect
congestion of labels on xaxis and it's solution,
Thanking you,
Manisha Boddu
…On Tue, Jul 30, 2019, 10:23 PM lhstock ***@***.***> wrote:
i'm sorry. this's an error. "ticks " does not apply to d3.scalePoint().
[image: image]
<https://user-images.githubusercontent.com/16400065/62148833-00619f80-b2ea-11e9-924f-7cac32242617.png>
You can assign data to control the quantity
var scale = d3.scalePoint() .domain(data)
or
Maybe you should choose the right scale type
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<https://gist.github.com/8394a9bef240321c34f3c13576d50ee5?email_source=notifications&email_token=AIUCPU5ZVIV5LIJLP574WGLQCBW2LA5CNFSM4IHZGIFKYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFWGOS#gistcomment-2985193>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AIUCPUYWXNPJRILARWSM4FTQCBW2LANCNFSM4IHZGIFA>
.
--
Breach of confidentiality
This email and any files transmitted with it
are confidential and intended solely for the use of the individual or
entity to whom they are addressed. If you have received this email in error
please notify the system manager. This message contains confidential
information and is intended only for the individual named. If you are not
the named addressee you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately by e-mail if you have received
this e-mail by mistake then delete this e-mail from your system. If you are
not the intended recipient you are notified that disclosing, copying,
distributing or taking any action in reliance on the contents of this
information is strictly prohibited.Liability for the unintentional
transmission of computer viruses
WARNING: Although the MetaMagic Global
has taken reasonable precautions to ensure no viruses are present in this
email, MetaMagic cannot accept responsibility for any loss or damage
arising from the use of this email or attachments.
let data = ['longString1',longString2',longString3',longString4',longString5']
let filterData = data.filter((d,i)=> i %2 === 0)
let scale = d3.scalePoint()
.domain(data)
.rangeRound([0,axis_length])
let scale = d3.scalePoint()
.domain(data)
. rangeRound([0,axios_length])
.tickValues(filterData) // see this code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
i have implemented same code with tick count 3 like this : var axis = d3.axisBottom().scale(scale).ticks(3), but its not reflecting , its still has 5 ticks on browser view, can u please brief me about it