程序员经验分享-hwhale

使用时间序列数据和scaleBand指定D3条形图上的刻度

2024-06-27

我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签，如下图所示：

基于本教程 https://bl.ocks.org/zigahertz/1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数据的条形图，但我无法让刻度以我想要的方式显示。例如，每 10 个刻度显示一次，为标签留出空间。任何帮助是极大的赞赏！

@prmko 感谢您的回复。我已经看过您在评论中引用的两篇文章，但是应用带有 tickValues 的解决方案会完全删除 x 轴上的刻度，这使我得出结论，我的情况有所不同。这就是为什么我在代码片段中注释掉了 tickValues 行。但我很想错，也许我没有正确阅读解决方案。您能提供一个实现这种方法的工作示例吗？感谢您的帮助。

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// Parse the date / time
var	parseDate = d3.isoParse

var x = d3.scaleBand().rangeRound([0, width], .05).padding(0.1);

var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom()
    .scale(x)
    .tickFormat(d3.timeFormat("%Y-%m-%d"))
    //.tickValues(x.domain().filter(function(d, i) {return !(i%4);}));
 
var yAxis = d3.axisLeft()
    .scale(y)
    .ticks(4);

var svg = d3.select("body").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 + ")");

// d3.csv("bar-data.csv", function(error, data) {
var data = [
  {
    "date": "2016-03-02T00:00:00-05:00",
    "value": "53"
  },
  {
    "date": "2016-03-03T00:00:00-05:00",
    "value": "165"
  },
  {
    "date": "2016-03-04T00:00:00-05:00",
    "value": "269"
  },
  {
    "date": "2016-03-05T00:00:00-05:00",
    "value": "344"
  },
  {
    "date": "2016-03-06T00:00:00-05:00",
    "value": "376"
  },
  {
    "date": "2016-03-07T00:00:00-05:00",
    "value": "410"
  },
  {
    "date": "2016-03-08T00:00:00-05:00",
    "value": "421"
  },
  {
    "date": "2016-03-09T00:00:00-05:00",
    "value": "405"
  },
  {
    "date": "2016-03-10T00:00:00-05:00",
    "value": "376"
  },
  {
    "date": "2016-03-11T00:00:00-05:00",
    "value": "359"
  },
  {
    "date": "2016-03-12T00:00:00-05:00",
    "value": "392"
  },
  {
    "date": "2016-03-13T00:00:00-05:00",
    "value": "433"
  },
  {
    "date": "2016-03-14T00:00:00-05:00",
    "value": "455"
  },
  {
    "date": "2016-03-15T00:00:00-05:00",
    "value": "478"
  }
];
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  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", "-.55em")
      .attr("transform", "rotate(-90)" );

  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("Value");

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

// });
	.axis {
	  font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}
<div class="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"  charset="utf-8"></script>

我更新了你的片段。当指定时.tickValues(x.domain().filter(function(d,i){ return !(i%10)}));，必须设置 x 缩放域，而在原始代码片段中调用时尚未设置。我将轴创建移至设置域之后并且它可以工作。

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// Parse the date / time
var	parseDate = d3.isoParse

var x = d3.scaleBand().rangeRound([0, width], .05).padding(0.1);

var y = d3.scaleLinear().range([height, 0]);

var yAxis = d3.axisLeft()
    .scale(y)
    .ticks(4);

var svg = d3.select("body").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 + ")");

// d3.csv("bar-data.csv", function(error, data) {
var data = [
  {
    "date": "2016-03-02T00:00:00-05:00",
    "value": "53"
  },
  {
    "date": "2016-03-03T00:00:00-05:00",
    "value": "165"
  },
  {
    "date": "2016-03-04T00:00:00-05:00",
    "value": "269"
  },
  {
    "date": "2016-03-05T00:00:00-05:00",
    "value": "344"
  },
  {
    "date": "2016-03-06T00:00:00-05:00",
    "value": "376"
  },
  {
    "date": "2016-03-07T00:00:00-05:00",
    "value": "410"
  },
  {
    "date": "2016-03-08T00:00:00-05:00",
    "value": "421"
  },
  {
    "date": "2016-03-09T00:00:00-05:00",
    "value": "405"
  },
  {
    "date": "2016-03-10T00:00:00-05:00",
    "value": "376"
  },
  {
    "date": "2016-03-11T00:00:00-05:00",
    "value": "359"
  },
  {
    "date": "2016-03-12T00:00:00-05:00",
    "value": "392"
  },
  {
    "date": "2016-03-13T00:00:00-05:00",
    "value": "433"
  },
  {
    "date": "2016-03-14T00:00:00-05:00",
    "value": "455"
  },
  {
    "date": "2016-03-15T00:00:00-05:00",
    "value": "478"
  }
];
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);
  
  var xAxis = d3.axisBottom()
    .scale(x)
    .tickFormat(d3.timeFormat("%Y-%m-%d"))
    .tickValues(x.domain().filter(function(d,i){ return !(i%4)}));

  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", "-.55em")
      .attr("transform", "rotate(-90)" );

  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("Value");

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

// });
	.axis {
	  font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}
<div class="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"  charset="utf-8"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

d3js

使用时间序列数据和scaleBand指定D3条形图上的刻度 的相关文章

随机推荐

  • 使用 START_STICKY 启动时服务进程被终止后的 onStartCommand

    我一直在阅读 Android 文档 我想知道是否有人可以阐明当以 START STICKY 启动的服务的进程被终止时服务实例会发生什么情况 我假设本地状态数据 实例变量 也丢失了 Android 在重新创建服务时是否会采取任何措施来帮助重新

  • 在 C# 中创建具有单独列的分隔文本

    我一直在尝试在 C 中创建一个制表符限制的文本文件 以便数据正确显示在单独的列中 Firstname Lastname Age John Smith 17 James Sawyer 31 我尝试过 t 字符 但我得到的只是 Firstnam

  • 如何使用MemoryCache代替Timer来触发一个方法？

    以下方法通过等待已运行操作的结果来处理并发请求 对数据的请求可能会使用相同 不同的凭据同时出现 对于每组唯一的凭据 最多可以有一个GetCurrentInternal呼叫正在进行中 当准备就绪时 该呼叫的结果将返回给所有排队的服务员 pri

  • 使用 Unity 在构造函数中使用属性依赖注入

    好的 我在基类中定义了一个依赖属性 我尝试在其派生类的构造函数内部使用它 但这不起作用 该属性显示为 null Unity 在使用 container Resolve 解析实例后解析依赖属性 我的另一种选择是将 IUnityContaine

  • Windows 64 位的 SQLite3 下载文件夹中没有 sqlite3.exe

    我正在尝试在 Windows 10 64 位上安装 SQLite 3SQLite下载页面 https www sqlite org download html我尝试了sqlite dll win64 x64 3170000 zip来自页面上

  • Django 表单：时间字段验证

    我觉得我在这里遗漏了一些明显的东西 我有一个 Django 表单 其中包含时间场 http docs djangoproject com en dev ref forms fields timefield在上面 我希望能够允许像 10 30

  • 我需要一个字数统计程序[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要弄清

  • VB.NET 相当于 C# 属性简写吗？

    是否有与 C 等效的 VB NET public string FirstName get set 我知道你能做到 Public Property name As String Get Return name ToString End Ge

  • 为什么 sed 将替换文本放在行首？

    在 Mac OS X bash 上 我在命令行中使用以下 sed sed s S 1 file1 txt gt file2 txt file1 txt有这样的行 some path to somewhere some stuff here

  • Collada 模型面在 Three.js 中无法正确显示

    将 collada 模型导入到 Three js 后 模型的某些面只能从模型内部看到 从外部看不到 如何解决相关面孔的问题 是否可以让模特的脸部从两侧都可见 它无法正常工作的原因是您的文件设置了此双面标志

  • 占位符不适用于 Internet Explorer

    我的应用程序出现了小问题 Internet Explorer 11 上不存在占位符 我尝试了下面的 CSS 示例 但没有成功 ms input placeholder IE10 11 color ccc important font wei

  • 如何以“打印”模式查看 Google 地图？

    我正在使用 Google Maps API v2 并且希望能够像 Google 在其地图页面上那样打印地图 您可以单击小打印机图标 它会创建一个具有相同地图的新弹出窗口 但所有不可打印的内容 如控件 都会被删除 我知道他们使用 media

  • 如何读取扩展文件属性/文件元数据

    因此 我按照教程使用 ASP net core 将文件 上传 到本地路径 这是代码 public IActionResult About IList

  • SQL限制数据库中的最小值和最大值

    CREATE TABLE TBL CD CDnr int identity 1 1 CDTitel nvarchar 80 NOT NULL CDduur int CDprijs smallmoney 所以我正在创建这个表 有什么方法可以将

  • 如何使用 jQuery 将各种元素包装在 div 标签中？

    我有一个 html 结构 如下所示 h5 Title h5 p Content p ul li Item li li Item li ul p Content p h5 Title h5 p Content p ul li Item li

  • 0x800a1391 - JavaScript 运行时错误：“阶段”未定义

    我正在尝试做这个教程 http www sitepoint com creating a simple windows 8 game with javascript game basics createjsaseljs http www s

  • 按文件名过滤 eclipse 中的警告

    我们使用 Eclipse 进行 Java 开发 并使用 Maven 将 JSP 编译成 servlet 以便在嵌入式 Jetty 实例中使用 这意味着要从 Eclipse 运行该项目 我必须包含 target jsp source 作为源文

  • 在 Android 中使用 AES 加密的最佳实践是什么？

    我为什么问这个问题 我知道人们对 AES 加密存在很多疑问 即使对于 Android 也是如此 如果您在网络上搜索 会发现很多代码片段 但在每个页面上 在每个 Stack Overflow 问题中 我都发现了另一个具有重大差异的实现 所以我

  • 在javascript中将.wav文件转换为.ogg

    我正在尝试从浏览器捕获用户的音频输入 我已经用WAV 完成了 但是文件很大 我的一个朋友告诉我 OGG 文件要小得多 有谁知道如何将WAV转换为OGG 我也有原始数据缓冲区 我真的不需要转换 但我只需要 OGG 编码器 这是来自的 WAV

  • 使用时间序列数据和scaleBand指定D3条形图上的刻度

    我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签 如下图所示 基于本教程 https bl ocks org zigahertz 1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数