javascript - 放大时 D3 轴标签变得过于细粒度

coder 2024-07-19 原文

我正在尝试创建一个轴函数，其刻度/标签是动态的，这意味着它们会自动隐藏/显示。但最重要的是，我希望在某个缩放级别停止渲染更多刻度/标签。这是一个示例:首先，轴显示年份，然后当您放大时，刻度变为月份，当您进一步放大时，它显示天数(即，12 月 28 日)。除了我想限制 d3 以便当缩放比月份更远时，它不再呈现任何刻度，因为月份是我想要的最小单位。

我有几个例子，如果组合起来就是我想要的，但我不知道该怎么做。

此外:我添加了 .tickFormat，因为我想显示每个价格变动以具有缩写的月份格式。

示例 1: http://jsfiddle.net/GGYKL/

var xAxis = d3.svg.axis().scale(x)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom");

此示例显示了在放大时刻度/标签如何正确显示和消失，但是当您继续放大时，它会拆分月份并开始重复月份刻度/标签，我不想限制用户缩放中。

示例 2: http://jsfiddle.net/4kz7t/

var xAxis = d3.svg.axis().scale(x)
    .ticks(d3.time.months)
    .tickFormat(d3.time.format('%b'))
    .orient("bottom"),

此示例解决了当您像我们在示例 1 中看到的那样继续放大时的问题，但它不会在缩放时动态隐藏/显示刻度/标签。

最佳答案

我遇到的最接近的答案是@Lars Kotthoff 建议的多尺度时间格式。我将自定义时间格式化程序编辑为:

http://jsfiddle.net/BdGv5/1/

var customTimeFormat = timeFormat([
    [d3.time.format("%Y"), function() { return true; }],
    [d3.time.format("%b"), function(d) { return d.getMonth(); }],
    [function(){return "";}, function(d) { return d.getDate() != 1; }]
]);

因此在放大时仍会生成刻度本身，但标签将为空字符串。

更新:

我最终创建了自己在 .ticks() 中使用的函数。 Ticks 将比例范围作为 t0 和 t1 传递给您的函数。我将图表宽度除以标签大小(和填充)以找到不重叠的最大标签数量，并使用下划线删除所有其他勾号(如果会发生重叠)。

http://jsfiddle.net/BdGv5/3/

function customTickFunction(t0, t1, dt)
    {

        var labelSize = 30; // largest label is 23 pixels ("May")
        var maxTotalLabels = Math.floor(width / labelSize);

        function step(date, offset)
        {
            date.setMonth(date.getMonth() + offset);
        }

        var time = d3.time.month.ceil(t0), times = [];

        while (time < t1) times.push(new Date(+time)), step(time, 1);

        if(times.length > maxTotalLabels)
            times = _.filter(times, function(d){
                return (d.getMonth() + 1) % 2;
            });

        return times;
    }

    var domain = xScale.domain();
    var xAxisMonthsFunction = d3.svg.axis().scale(xScale)
        .ticks(customTickFunction)
        .tickFormat(d3.time.format("%b"))
        .orient("bottom");

更新 2:

http://jsfiddle.net/BdGv5/5/

使滴答调整进一步超过 1 个级别，现在它有 4 个级别 (2,3,4,6)。

function customTickFunction(t0, t1, dt)
{

    var labelSize = 30; // largest label is 23 pixels ("May")
    var maxTotalLabels = Math.floor(width / labelSize);

    function step(date, offset)
    {
        date.setMonth(date.getMonth() + offset);
    }

    var time = d3.time.month.ceil(t0), times = [], monthFactors = [2,3,4,6];

    while (time < t1) times.push(new Date(+time)), step(time, 1);

    var i;
    for(i=1 ; times.length > maxTotalLabels ; i++)
        times = _.filter(times, function(d){
            return (d.getMonth()) % monthFactors[i] == 0;
        });

    return times;
}

关于javascript - 放大时 D3 轴标签变得过于细粒度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20010864/

javascript D3 刻度 time function d3.js

有关javascript - 放大时 D3 轴标签变得过于细粒度的更多相关文章

ruby - 在院子里用@param 标签警告 - 2
我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 使用 AES 的 Rails 加密，过于复杂 - 2
我在加密来self正在使用的第三方供应商的值时遇到问题。他们的指令如下:1)Converttheencryptionpasswordtoabytearray.2)Convertthevaluetobeencryptedtoabytearray.3)Theentirelengthofthearrayisinsertedasthefirstfourbytesontothefrontofthefirstblockoftheresultantbytearraybeforeencryption.4)EncryptthevalueusingAESwith:1.256-bitkeysize,2.25
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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 如何用 Nokogiri 解析连续的标签？ - 2
我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(
ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2
我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"
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
ruby - 如何使用 Nokogiri::XML::Builder 生成动态标签？ - 2
我正在遍历数组中的一组标签名称，我想使用构建器打印每个标签名称，而不是求助于“我认为:builder=Nokogiri::XML::Builder.newdo|xml|fortagintagsxml.tag!tag,somevalendend会这样做，但它只是创建名称为“tag”的标签，并将标签变量作为元素的文本值。有人可以帮忙吗？这个看起来应该比较简单，我刚刚在搜索引擎上找不到答案。我可能没有以正确的方式提问。最佳答案尝试以下操作。如果我没记错的话，我添加了一个根节点，因为Nokogiri需要一个。builder=Nokogi
网站日志分析软件--让网站日志分析工作变得更简单 - 2
网站的日志分析，是seo优化不可忽视的一门功课，但网站越大，每天产生的日志就越大，大站一天都可以产生几个G的网站日志，如果光靠肉眼去分析，那可能看到猴年马月都看不完，因此借助网站日志分析工具去分析网站日志，那将会使网站日志分析工作变得更简单。下面推荐两款网站日志分析软件。第一款：逆火网站日志分析器逆火网站日志分析器是一款功能全面的网站服务器日志分析软件。通过分析网站的日志文件，不仅能够精准的知道网站的访问量、网站的访问来源，网站的广告点击，访客的地区统计，搜索引擎关键字查询等，还能够一次性分析多个网站的日志文件，让你轻松管理网站。逆火网站日志分析器下载地址：https://pan.baidu.
ruby-on-rails - 如何将变量值插入 ERB 模板中的 HTML 标签？ - 2
我有一个偏爱:如何将像o.office这样的值插入到属性中？value="#{o.office}"无效。最佳答案 'type='text'/>或者你可以使用表单助手关于ruby-on-rails-如何将变量值插入ERB模板中的HTML标签？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6172174/

javascript - 放大时 D3 轴标签变得过于细粒度

有关javascript - 放大时 D3 轴标签变得过于细粒度的更多相关文章

随机推荐