草庐IT

javascript - D3 分组条形图 : How to rotate the text of x axis ticks?

coder 2024-07-27 原文

我使用的是分组条形图(http://bl.ocks.org/mbostock/3887051)，但是x轴的文字很长，如附图所示。如何旋转文字？谢谢你。

最佳答案

可以找到合理的解决方案here

结果是这样的:

确保您完全理解这部分代码:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")  
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)");

-65 是标签文本旋转的 Angular ，以度为单位。

另外，你应该增加底部的边距，这样旋转的文本就不会被剪掉。

警告:旋转文本不可避免地会在最后由浏览器呈现(D3 只是创建适当的 svg 由浏览器解释)，并且它们在呈现旋转文本方面做得很糟糕(与高级绘图或图表软件相反)。

此外，相关的 StackOverflow 问题:

rotate-x-axis-text-in-d3

how-to-rotate-x-axis-text-in-dimple-js

关于javascript - D3 分组条形图 : How to rotate the text of x axis ticks?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20947488/

条形javascript34sectionrotatesvgd3.jsbar-chartaxis-labels

有关javascript - D3 分组条形图 : How to rotate the text of x axis ticks?的更多相关文章

  1. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  2. ruby - 在 Ruby 中创建按公共(public)键值分组的新哈希 - 2

    假设我有一个在Ruby中看起来像这样的哈希:{:ie0=>"Hi",:ex0=>"Hey",:eg0=>"Howdy",:ie1=>"Hello",:ex1=>"Greetings",:eg1=>"Goodday"}有什么好的方法可以将它变成如下内容:{"0"=>{"ie"=>"Hi","ex"=>"Hey","eg"=>"Howdy"},"1"=>{"ie"=>"Hello","ex"=>"Greetings","eg"=>"Goodday"}} 最佳答案 您要求一个好的方法来做到这一点，所以答案是:一种您或同事可以在六个月后理解

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. arrays - 如何在下面的示例中将两个值数组分组为 n 个值数组？ - 2

    我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby​​库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_

  5. ruby - 如何将相同的相邻数字分组 - 2

    如果至少有两个相邻的数字相同，格式为，我需要打包.这是我的输入:[2,2,2,3,4,3,3,2,4,4,5]以及预期的输出:"2:3,3,4,3:2,2,4:2,5"到目前为止我试过:a=[1,1,1,2,2,3,2,3,4,4,5]a.each_cons(2).any?do|s,t|ifs==t如果相等，也许可以尝试计数器，但那是行不通的。 最佳答案 您可以使用Enumerable#chunk_while(如果你使用的是Ruby>=2.3):a.chunk_while{|a,b|a==b}.flat_map{|chunk|chu

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby - 如何在 Ruby 中将数字分组到不同的桶中 - 2

    我有一个文件，每一行都有数字:010110101311010113114311010431420我想要一个包含每个数字出现次数的散列，在这种情况下:{0101=>2,1010=>2,1311=>2,431=>2,420=>1}我该怎么做？ 最佳答案 简单的一行代码，给定一个数组items:items.inject(Hash.new(0)){|hash,item|hash[item]+=1;hash}工作原理:Hash.new(0)创建一个新的Hash，其中访问未定义的键返回0。inject(foo)使用给定的block遍历数组。对于

  8. ruby - 在 StockChart (highchart) 中以编程方式显示柱形图的工具提示 - 2

    我有一个Highstock图表(带有标记和阴影的线条)，并且想以编程方式显示一个highstock工具提示，例如，当我选择某个表上的一行(包含图表数据)我想显示相应的highstock工具提示。这可能吗？ 最佳答案 股票图表thissolution不起作用:在thisexample你必须更换这个:chart.tooltip.refresh(chart.series[0].data[i]);为此:chart.tooltip.refresh([chart.series[0].points[i]]);解决方案可用here.

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - Ruby On Rails Mongoid 分组依据 - 2

    对于按日期分组，我使用了group_by方法。Example:Product.all.group_by{|d|d.created_at}#returnHash但是kaminari不支持Hash。我使用Mongoid，我需要通过页面导航(kaminari)按日期分组。怎么做到的？ 最佳答案 Kaminari只支持数组分页例如Kaminari.paginate_array(an_array).page(1).per(10)group_by不是mongoid方法，它是Array的方法，它是对内存中的所有数据进行分组。为了使用mongoid

随机推荐