草庐IT

javascript - 在 d3 js 中仅在 x 轴上表示年份的比例是多少

coder 2024-12-14 原文

我一直在 D3 Js 中开发年(x 轴)与收入(y 轴)的面积图。数据如下:

localData=[
        {"Revenue":"4.5","Year":"2011"},
        {"Revenue":"5.5","Year":"2010"},
        {"Revenue":"7.0","Year":"2012"},
        {"Revenue":"6.5","Year":"2013"}
       ]

我想要面积图的 x 轴为年份，y 轴为收入。目前我正在为 x 轴使用时间刻度，但我不知道如何使用它，因为我没有日期格式，我只有年份来表示。

我当前的代码是:

 var margin = { top: 20, right: 20, bottom: 30, left: 50 },
                width = 500 - margin.left - margin.right,
                height = 300 - margin.top - margin.bottom;
            var parseDate = d3.time.format("%Y").parse;

            var x = d3.time.scale()
                      .range([0, width]);


            var y = d3.scale.linear()
                .range([height, 0]);
            var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");


            var area = d3.svg.area()
                .x(function (d) { return x(d.Year); })
                .y0(height)
                .y1(function (d) { return y(d.Revenue); });
            $("#chartArea").html("");
            var svg = d3.select("#chartArea").append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                      .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            x.domain(d3.extent(localData, function (d) { return d.Year; }));
            y.domain([0, d3.max(localData, function (d) { return d.Revenue; })]);
            svg.append("path")
                 .datum(localData)
                 .attr("class", "area")
                 .attr("d", area)
                .attr("fill",color);
            svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Revenue (M)");

目前我在我的 X 轴上得到 .011,.012,013,.014 我需要 2011,2012,2013,2014 我是 D3 js 的新手，所以不知道如何使用比例尺？请帮助任何人..提前致谢。

最佳答案

只需将刻度格式添加到您的 x 轴定义中:

  var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .tickFormat(d3.time.format("%Y")); // <-- format

关于javascript - 在 d3 js 中仅在 x 轴上表示年份的比例是多少，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32428122/

上表javascript34marginattrd3.js

有关javascript - 在 d3 js 中仅在 x 轴上表示年份的比例是多少的更多相关文章

  1. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  2. ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

  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. ruby-on-rails - Rails 3 Formtastic。如何让 formtastic 仅显示月份和年份字段而不显示日期？ - 2

    我需要formtastic来仅显示月份和年份字段，而不显示日期字段。日期选择器很好，但它显示了整个日历。我不想要日期选择器。f.input:accounting_month,:label=>"会计月份",:as=>:datepicker我只需要月份和年份。 最佳答案 有一种方法可以做到这一点:"Accountingmonth",:order=>[:month,:year]这将自动隐藏“天”输入并为其指定默认值1。 关于ruby-on-rails-Rails3Formtastic。如何让f

  5. ruby-on-rails - NameError(未初始化常量 Unzipper::Zip)但仅在 Heroku 部署(Rails)上 - 2

    我有一个类unzipper.rb，它使用Rubyzip解压文件。在我的本地环境中，我可以成功解压缩文件，而无需使用require'zip'明确包含依赖项但是在Heroku上，我得到一个NameError(uninitializedconstantUnzipper::Zip)我只能通过使用明确的require来解决问题:为什么这在H​​eroku环境中是必需的，但在本地主机上却不是？我的印象是Rails自动需要所有gem。app/services/unzipper.rbrequire'zip'#OnlyrequiredforHeroku.Workslocallywithout!class

  6. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  8. 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

  9. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  10. 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功能。修复:获取文

随机推荐